vue项目不支持直接打包exe,可以依靠electron进行打包,处理方式是将vue打包的dist文件夹放到electron项目中,通过配置后打包electron.先看下本地环境
下面是实操记录:
1.vue项目打包
vue.config.js中设置项目路径为
module.exports = {//publicPath: '/chat_pc/', // 前端项目部署路径publicPath: './', // electron打包路径
}
打包命令:
npm run build
2.下载electron示例项目
git clone https://github.com/electron/electron-quick-start
如果出现下载不成功的情况可以自行创建electron项目,我这里已上传当时使用的electron示例项目:electron示例项目
将vue项目打包后的dist文件夹放到electron的根目录
修改根目录main.js中内容:
/* 修改后 */// mainWindow.loadFile('index.html')/* 修改后 */mainWindow.loadFile('./dist/index.html')
3.启动electron项目
按照以下命令操作:
// 国内网络下载electron可能很慢，建议设置
// npm config set registry https://registry.npm.taobao.org/
// npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/npm install
npm run start
执行npm install 报错:
command C:\Windows\system32\cmd.exe /d /s /c node install.js
npm ERR! HTTPError: Response code 404 (Not Found)
处理办法:
cnpm i electron --save-d
如果没有安装过cnpm需要安装cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
执行执行npm run start报错:
cnpm i electron --save-d
4.安装打包依赖
cnpm install electron-packager --save-dev
修改electron示例项目中package.json内容:
"scripts": {
"start": "electron .",
"packager": "electron-packager ./ 应用名 --platform=win32 --arch=x64 --overwrite"//此处为添加的内容
}
5.打包
cnpm run packager
electron项目中添加了热部署,打包的时候可以注释掉,否者会提示electron-reloader找不到.
// 开启热加载 正式环境关闭
// const reloader = require('electron-reloader')
// reloader(module)
重新打包时注意将生成的打包文件删除后重新执行以上命令,首次会慢,以后打包时间会快.我这边生成的exe文件是:
注意:electron示例项目中的热部署部分需要注释,否则打包之后会提示找不到electron-reloader
// 开启热加载 正式环境打包时关闭
// const reloader = require('electron-reloader')
// reloader(module)
