vue项目通过Electron生成桌面应用

本文主要使用的方法是将自己的Vue项目打包，放到electron官方的demo文件中，修改相应的配置后，生成exe文件。

一、安装

1. 把electron的官方demo下载下来

git clone https://github.com/electron/electron-quick-start 

2. 安装cnpm

非必要，这个下载快一些

npm install -g cnpm -registry=https://registry.npm.taobao.org

使用 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\=https://npm.taobao.org/mirrors/electron/ 
npm set ELECTRON\_CUSTOM\_DIR\=16.0.5

或者直接在C:\user\xxx路径下 搜索**.npmrc**然后打开文件进行修改

registry=https://registry.npmjs.org/
ELECTRON\_MIRROR\=https://npm.taobao.org/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": "https://github.com/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": "https://npm.taobao.org/mirrors/electron/"
  }
}

这里默认是打windows 64位的包.
如果打其他平台的包，只需要更改dist对应的命令，大概怎么配置请百度builder的配置

4. 执行打包

npm run dist

打包需要依赖于三个包，分别是

1. electron-v版本-打包的平台.zip的包（如我这里是 electron-v16.0.5-win32-x64.zip ）
2. winCodeSign
3. nsis

远程下载这三个依赖时，可能会因为超时报错，根据错误提示的地址（如下图）手动安装相应的文件就行。

1.下载 electron-v版本-打包的平台.zip的包

在electron 淘宝镜像：https://npm.taobao.org/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)，我这里是
https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z
下载后解压，拷贝解压后的文件夹中 winCodeSign 文件夹中的所有文件到如图位置：

3. 下载 nsis

根据报错信息提示的下载地址，手动下载自己需要的版本，我这里是
https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.2/nsis-3.0.4.2.7z
https://github.com/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