使用webpack打包项目 并 使用electron生成exe桌面程序——由vue-cli搭建的vue项目

将由vue-cli搭建的vue项目通过webpack打包

路径问题,生成相对路径

参考://https://blog.csdn.net/qq_29436563/article/details/56676578

找到config文件夹下面的index.js,将assetsPublicPath: '/' 中的/去掉。

参考://https://blog.csdn.net/xiangzhihong8/article/details/80427160

由于vue-cli生成的webpack项目在package.json中已经配置了build. 直接使用npm run-script build即可自动进行打包。打包成功后会新增了一个 dist 目录,里边存放的是 webpack 构建的项目。在config下的index.js中有相关的构建配置。

将打包的项目生成桌面程序

建议新建一个文件夹,将打包后的dist文件夹放入其中,这样打包后的项目才会精简。

新建文件夹中需要手动添加两个文件:main.js和package.json,前者配置了生成exe客户端的相关信息及首页入口,后者为npm的配置文件。之后参考“将electron打包成exe文件并生成安装版本exe”进行后续操作即可。

package.json中的scripts中的electron版本号一定要写对,不然生成的exe会报 mainWindow.loadFile is not a function 错,无法运行。

新加评论 评论标题: