vue项目使用electron打包成exe
1、环境准备
系统版本 windows 10
λ node -v
v12.19.0
λ vue -V
@vue/cli 4.5.7
λ npm -v
6.14.8
image
2、将electron官方打包例子克隆下来
git clone https:``//github``.com``/electron/electron-quick-start
image
3、测试官方例子
安装cnpm
因为npm安装太慢了所以安装cnpm
npm ``install-g cnpm --registry=https:``//registry``.npm.taobao.org
cd``到electron-quick-start 文件夹中
然后输入命令
cnpm ``install
image
然后输入
npm run start
出现下面界面表示clone的项目没问题
image
4、安装electron-packager
安装
cnpm install electron-packager --save-dev
配置package.json中的npm脚本命令， "scripts": { "start": "electron .", "packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"//此处为添加命令
}
命令说明：
* location of project：项目所在路径
* name of project：打包的项目名字
* platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）
* architecture：决定了使用 x86 还是 x64 还是两个架构都用
* electron version：electron 的版本
* optional options：可选选项
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>
打包命令参考https://blog.csdn.net/a1170201028/article/details/59108126</pre>
image.png
5、输入打包命令
然后输入命令
npm run packager
image
最终效果
image
6、将vue项目生成dist文件后放到打包文件夹
npm run build
image
7、修改打包文件的index.html位置
mainWindow.loadFile('./dist/index.html')
image
npm run start
测试项目是否能跑起来
image
注意：如果出现白屏情况要检查dist中的index.html中的引用文件的路径是不是相对路径
image
8、最后删除掉测试打包的文件，然后运行打包命令将项目打包
npm run packager
image
