将Vue项目打包成exe可执行文件
转载:https://blog.csdn.net/w15635748705/article/details/125378242
Vue项目打包成可执行的exe文件
打包静态文件
首先先打包vue文件我的目录结构是这样的:
然后新建vue.config.js文件
添加如下代码:
module.exports = {
// assetsPublicPath: './',
publicPath: "./", // 公共路径(必须有的)
outputDir: "dist", // 输出文件目录
assetsDir: "static", // 静态资源文件名称
lintOnSave: false,
productionSourceMap: false, // 去除打包后js的map文件
devServer: {
// 启动项目在8080端口自动打开
open: true,
port: 8080,
proxy: null,
},
// 去掉console
configureWebpack: (config) => {
// 判断为生产模式下,因为开发模式我们是想保存console的
if (process.env.NODE_ENV === "production") {
config.optimization.minimizer.map((arg) => {
const option = arg.options.terserOptions.compress;
option.drop_console = true; // 打开开关
return arg;
});
}
},
// eslint-disable-next-line no-dupe-keys
configureWebpack: {
// 关闭 webpack 的性能提示
// performance: {
// hints:false
// }
// //或者
// 警告 webpack 的性能提示
performance: {
hints: "warning",
// 入口起点的最大体积
maxEntrypointSize: 50000000,
// 生成文件的最大体积
maxAssetSize: 30000000,
// 只给出 js 文件的性能提示
assetFilter: function (assetFilename) {
return assetFilename.endsWith(".js");
},
},
},
// 加载移动端适配器 px2rem
// css: {
// loaderOptions: {
// css: {},
// postcss: {
// plugins: [
// require('postcss-px2rem')({
// remUnit: 20
// })
// ]
// }
// }
// }
};
然后打开终端窗口:
输入打包指令:
输入打包指令:
npm run build
打包完成之后会在目录中生成dist文件
可以在浏览器打开dist中的index.html文件查看是否白屏,如果白屏可能是路由模式的问题 不要使用 history模式
这样的话我们的静态文件就准备好了
打包成App
这里使用的是 electron
官方网址:https://www.electronjs.org/
在桌面上新建一个文件夹 exe
在里面按住 Shift 点击右键 打开PowerShell窗口
在窗口中输入指令:
# 将electron官网中的quick-start拉取到本地
git clone https://github.com/electron/electron-quick-start
然后使用cd命令进入electron-quick-start
cd electron-quick-start
# 下载项目需要的依赖
npm install
# 安装 packager包依赖
npm install electron-packager --save-dev
# 运行一下Demo看看是否可以成功
npm run start
这个项目是使用node开发的,到这里就成功一半了
紧接着将Vue项目中打包好的dist文件放置到这个目录下
然后删除掉原来文件下有的index.html
打开main.js文件
紧接着打开 package.json文件:
在 scripts 中添加如下代码:
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"
打开PowerShell终端
运行打包指令
npm run packager
紧接着在目录下就会生成一个 App-win32-x64 的文件 双击文件中的App.exe就可以看到打包好的成果了
我是小生啊: 我docker run的时候加上--net=host就报Node '208@0.0.0.208' not responding to pings. 这个错
我是小生啊: 大佬报错了啊 docker exec -it emqx /bin/sh /opt/emqx/bin/emqx_ctl cluster status Node '201@192.168.2.201' not responding to pings.
weixin_53163980: 网盘链接不存在
weixin_53163980: 失效了,博主。
攻城狮小C: 链接打不开,能发个安装包吗