vue项目通过Electron生成桌面应用
一、安装1. 把electron的官方demo下载下来2. 安装cnpm3. npm start 启动electron4. 修改vue项目5. 打包vue项目，将打包出来的dist文件夹复制到electron项目的根目录下6. electron文件夹中，删除根目录下index.html文件7. electron文件夹中，修改main.js，修改打包文件路径为vue项目的index.html8. electron中，安装打包需要的依赖electron-packager9. 修改package.json，在 scripts 中添加 packager 指令，如下所示：10. 运行命令打包，然后项目中会出现一个的文件夹，这个文件就是打包好的桌面应用，文件夹里有一个 xxx.exe 文件，xxx.exe就是这个项目的启动文件二、打包慢问题1. 安装 electron-builder2. 更改npm的源和版本设置3. package.json配置4. 执行打包1.下载 electron-v版本-打包的平台.zip的包2. 下载 winCodeSign3. 下载 nsis三、接口请求问题1. 修改axios模块的baseUrl属性为真实的url地址2. 在electron主启动类（我的是main.js文件）中关闭web权限检查四、静态资源丢失问题五、路由不跳转问题1. vue项目中router/index.js mode:history 注释掉2. electron的cookie获取有问题，将token获取方式改成通过vuex store存储获取本文主要使用的方法是将自己的Vue项目打包，放到electron官方的demo文件中，修改相应的配置后，生成exe文件。
一、安装
1. 把electron的官方demo下载下来
git clone /electron/electron-quick-start
2. 安装cnpm
非必要，这个下载快一些
npm install -g cnpm -registry=https://registry.
使用 cnpm -v 查看是否安装成功
使用 cnpm i 安装依赖
3. npm start 启动electron
检查一下是否正常启动
4. 修改vue项目
修改公共路径为相对路径（不修改 npm run build 后会出现白屏情况）
修改vue.config.js中配置为publicPath:’./'
5. 打包vue项目，将打包出来的dist文件夹复制到electron项目的根目录下
npm run build
6. electron文件夹中，删除根目录下index.html文件
7. electron文件夹中，修改main.js，修改打包文件路径为vue项目的index.html
// main.js 原始内容 mainWindow.loadFile('index.html') // 修改后的内容 mainWindow.loadFile('./dist/index.html')
8. electron中，安装打包需要的依赖electron-packager
cnpm install electron-packager --save-dev
9. 修改package.json，在 scripts 中添加 packager 指令，如下所示：
自己修改一下exe的名字和icon路径，更多配置内容请查阅文档
"packager": "electron-packager ./ YOUR_APP_NAME --platform=win32 --arch=x64 --icon=./dist/favicon.ico --overwrite"
10. 运行命令打包，然后项目中会出现一个的文件夹，这个文件就是打包好的桌面应用，文件夹里有一个 xxx.exe 文件，xxx.exe就是这个项目的启动文件
npm run packager
二、打包慢问题
上面的打包方式太慢，使用electron-builder打包
1. 安装 electron-builder
cnpm install electron-builder --save-dev
2. 更改npm的源和版本设置
这个设置可以在你执行安装依赖之前就设置好
//你可以使用终端输入命令
npm set ELECTRON\_MIRROR\=/mirrors/electron/ npm set ELECTRON\_CUSTOM\_DIR\=16.0.5
或者直接在C:\user\xxx路径下 搜索**.npmrc**然后打开文件进行修改
registry=/ELECTRON\_MIRROR\=/mirrors/electron/ELECTRON\_CUSTOM\_DIR\="==16.0.5"
注意:这个版本号需要和你package.json中的版本号相同
3. package.json配置
{"name": "electron-quick-start","version": "1.0.0","description": "A minimal Electron application","main": "main.js","build": {"productName": "myFirstElectron","appId": "com.electron.electron-quick-start","copyright": "xxxx","directories": {"output": "build"},"mac": {"target": ["dmg","zip"]},"win": {"target": ["nsis","zip"],"icon": "./dist/favicon.ico"}},"scripts": {"start": "electron .","packager": "electron-packager ./ myFirstElectron --platform=win32 --arch=x64 --icon=./dist/favicon.ico --overwrite","dist": "electron-builder --win --x64"},"repository": "/electron/electron-quick-start","keywords": ["Electron","quick","start","tutorial","demo"],"author": "GitHub","license": "CC0-1.0","devDependencies": {"electron": "^16.0.5","electron-builder": "^22.14.5","electron-packager": "^15.4.0"},"electronDownload": {"mirror": "/mirrors/electron/"}}
这里默认是打windows 64位的包.
如果打其他平台的包，只需要更改dist对应的命令，大概怎么配置请百度builder的配置
4. 执行打包
npm run dist
打包需要依赖于三个包，分别是
electron-v版本-打包的平台.zip的包（如我这里是 electron-v16.0.5-win32-x64.zip ）winCodeSignnsis
远程下载这三个依赖时，可能会因为超时报错，根据错误提示的地址（如下图）手动安装相应的文件就行。
1.下载 electron-v版本-打包的平台.zip的包
在electron 淘宝镜像：/mirrors/electron/ 中选择自己需要的版本，如我这是是16.0.5，下载electron-v16.0.5-win32-x64.zip和SHASUMS256.txt，下载完成后，将SHASUMS256.txt文件改成SHASUMS256.txt-16.0.5拷入如图位置：
2. 下载 winCodeSign
根据报错信息提示的下载地址，手动下载自己需要的版本，下载Source code(zip)，我这里是
/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z
下载后解压，拷贝解压后的文件夹中winCodeSign文件夹中的所有文件到如图位置：
3. 下载 nsis
根据报错信息提示的下载地址，手动下载自己需要的版本，我这里是
/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.2/nsis-3.0.4.2.7z
/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z
下载后解压，拷贝解压后的文件到如图位置：
下好后重新执行npm run dist，会生成exe文件。
注意：打包要求ico文件最少是256*256的
三、接口请求问题
electron-bulider 打包后，接口请求前缀变成file://的问题
对基于 electron-builder 插件创建的桌面应用，所有的页面访问都被影射到了文件上，所以配置中的proxy值如：/api访问都会映射到文件上，对vue的网络代理将失效。解决这一问题可以使用electron的方式实现跨域请求，解决方案如下：
1. 修改axios模块的baseUrl属性为真实的url地址
Vue.prototype.axios.defaults.baseURL ="http://localhost:8088/server";
也可以通过修改.env.produnction中的配置来修改 axiosbaseURL 的值，如下：
2. 在electron主启动类（我的是main.js文件）中关闭web权限检查
async function createWindow() {const win = new BrowserWindow({...webPreferences: {...//关闭web权限检查，允许跨域webSecurity: false}})//打包后开启控制台//win.webContents.openDevTools();... }
四、静态资源丢失问题
vue项目中router/index.js mode:history 注释掉
五、路由不跳转问题
1. vue项目中router/index.js mode:history 注释掉
2. electron的cookie获取有问题，将token获取方式改成通过vuex store存储获取
request.js
permission.js
