vue项目打包exe

2022-02-19 本文已影响0人叫我颜先生

安装vue

npm install -g @vue/cli
npm install -g @vue/cli-init

my-vue-project：找到config/index.js文件；修改 assetsPublicPath的路径；文件中dev和build有两处使用到，请注意修改build处
```
build: {
 ...
 assetsPublicPath: './',
}
```
my-vue-project：打包项目，生存文件夹dist
```
npm run build
```
electron：将dist文件夹放在根目录，修改main.js文件，删除index.html文件
```
mainWindow.loadFile('dist/index.html')
```
electron：执行命令运行查看运行效果
```
npm run start
```
此时应该可以看到vue项目变成了exe文件的形式在运行

electron：下载打包所需的依赖

npm install electron-packager --save-dev

electron：打开package.json，在scripts中添加打包命令
```
"scripts": { 
 "start": "electron .", 
 "packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"//此处为添加命令
}
```
如果你想修改最后打包出来的exe文件图标，类似于favicon，或者EXE的名字，可以设置 packager 的指令内容为，icon的路径自己调整下，更多配置内容请查阅文档：
```
"packager": "electron-packager ./ YOUR_APP_NAME --platform=win32 --arch=x64 --icon=./dist/favicon.ico --overwrite" 
```
electron：打包项目
```
npm run packager
```
到此，就生成了EXE的可执行文件，但是是一个文件夹，需要进行整个文件夹的压缩封装

InnoSetup下载、安装、打包