vue项目打包成桌面应用
2021-05-10 本文已影响0人
lzm_CX330
1：clone electron的官方例子：
git clone https://github.com/electron/electron-quick-start
2:打包你的项目，将打包出来的 dist 文件夹复制到之前下载的electron项目中
npm run build
3:删除electron项目中的index.html文件
4:在electron项目中找到入口文件 main.js ，修改打包的文件路径为我们的index.html：
mainWindow.loadFile('./dist/index.html')
5:在electron项目中检查 package.json 的命令，正常情况下，运行下列指令即可进行打包效果预览：
// 国内网络下载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
6:下载打包需要的依赖 electron-packager
npm install electron-packager --save-dev
7:进入 package.json ，在 scripts 中添加 packager 指令
"scripts": {
"start": "electron .",
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"//此处为添加命令
}
8:运行命令打包，然后项目中会出现一个 App-win32-x64 的文件夹，这个文件就是打包好的桌面应用，文件夹里有一个 App.exe 文件，App.exe就是这个项目的启动文件：
npm run packager
打包为桌面应用后，登录无法跳转，可能是因为vue项目中使用了cookie存储信息，而打包后的桌面应用无法兼容，更改使用localstorage或session后重试即可
