electron套壳vue2项目

剧情回顾

最近lender提了个需求，说最近项目可能要变动一下，把网页端变成桌面端，小手一挥，博主就开始库库的找。奈何网上教程一大堆，但是没找到一个对版的，不是安装过程有错，就是执行命令过程失误。一个教程文章得搜五个报错文章，虽然最终我做出来噜，但是很费劲，所以这篇用来总结一下。
PS：基本上你遇到的坑不会比我多了，如果有问题直接贴在评论区，我要是解决不了那就是解决不了(狗头)

electron安装

首先新建一个vue项目，在选项中选择vue2，按默认配置生成。如果在生成过程中出现错误中断，请先删除 node_modules 文件夹，不用再安装，因为后续会再装
PS：如果你是老项目，请无视上面这一步，直接把 node_modules 文件夹删除。

vue create electron-vue

接着在项目根目录下创建 background.js 并输入如下内容，调整electron应用程序大小及打包形式

const { app, BrowserWindow, screen, ipcMain, nativeTheme } = require('electron')
const path = require('path')

// 热加载
try {
  require('electron-reloader')(module,{});
} catch (_) {}

const createWindow = () => {
  const win = new BrowserWindow({
    width: screen.getPrimaryDisplay().workAreaSize.width, // 直接显示最宽窗口，非最大化
    height: screen.getPrimaryDisplay().workAreaSize.height, // 直接显示最高窗口，非最大化
  })
  // 判断当前环境
  if (process.env.NODE_ENV === 'development') {
    win.webContents.openDevTools() // 自动打开工作台
    win.loadURL('http://localhost:8080') // 加载本地服务地址
  } else {
    win.loadFile('./dist/index.html') // 加载打包后的静态页面
  }
}

app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

然后调整package.json为如下内容，增加作者、描述、运行命令、electron的各种包等
PS：老项目复制main、electron包、命令、cross-env等部分，如果没author和description记得补充

{
  "name": "electron-vue",
  "version": "0.1.0",
  "private": true,
  "main": "background.js", // 刚才创建的background.js
  "description": "this is test vue and electron project", // 必须有不然electron打包会报错
  "author": "GuoWei-Liu", // 必须有不然electron打包会报错
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "electron-squirrel-startup": "^1.0.0",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@electron-forge/cli": "^6.4.2",
    "@electron-forge/maker-deb": "^6.4.2",
    "@electron-forge/maker-rpm": "^6.4.2",
    "@electron-forge/maker-squirrel": "^6.4.2",
    "@electron-forge/maker-zip": "^6.4.2",
    "@electron-forge/plugin-auto-unpack-natives": "^6.4.2",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "cross-env": "^7.0.2",
    "electron": "^24.8.8",
    "electron-reloader": "^1.2.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

接着运行 npm i 指令，安装electron所需要的包
安装期间如果报出问题 Error: certificate has expired 这种报错，一般有以下两种情况：
1.使用 cnpm 的，最近淘宝镜像有点问题，请执行npm并切换源 npm config set registry https://registry.npmmirror.com
2.安全证书不安全导致的，请执行 set NODE_TLS_REJECT_UNAUTHORIZED=0 暂时禁用验证

npm i

electron配置

安装完成后，我们要在在命令行执行 npx electron-forge import 生成electron-forge的配置文件

npx electron-forge import

生成的文件名为 forge.config.js ，内容如下：

module.exports = {
  packagerConfig: {
    asar: true,
  },
  rebuildConfig: {},
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {},
    },
    {
      name: '@electron-forge/maker-zip',
      platforms: ['darwin'],
    },
    {
      name: '@electron-forge/maker-deb',
      config: {},
    },
    {
      name: '@electron-forge/maker-rpm',
      config: {},
    },
  ],
  plugins: [
    {
      name: '@electron-forge/plugin-auto-unpack-natives',
      config: {},
    },
  ],
};

接着回到 package.json ，根据环境变量调整start和make命令，此调整一定要在npx后调整，因为electron-forge会进行命令覆盖

    ……
    "start": "cross-env NODE_ENV=development electron-forge start",
    "make": "cross-env NODE_ENV=production electron-forge make"
    ……

开发环境运行

首先打开两个命令行，先在命令行1中执行 npm run dev 命令，等待vue服务器打开
这里注意，要确定好本地服务器的地址，一定要与 background.js 里 loadURL 函数的地址对上

npm run dev
……
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.20.103:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build. 

服务器打开后，在在命令行2中执行 npm run start 命令开启应用，效果图如下所示

npm run start

生产环境打包

和开发环境一样，打开两个命令行，先在命令行1中执行 npm run build 命令，等待文件打包完成
这里重点注意几点！！很多小坑：
1.将 vue.config.js 文件里的 publicPath 字段默认值改为 ./，不然会出现打包完成后页面空白现象。
2.使用了axios需要调整baseURL字段，改为服务器接口地址，不然默认打包完访问的api地址是file:///
3.使用了router需要把mode字段改为hash，要不路由会失效
4.使用了cookie需要改一下编码逻辑，可以用localStorage，不然在应用程序里面不识别。
5.确定好打包的位置，一定要要与 background.js 里 loadFile 函数的地址对上。

npm run build

打包完成后，在命令行2中执行 npm run make 命令，将vue打包成应用程序。打包成功的应用程序可以在 out/electron-vue-win32-x64/electron-vue.exe 点击查看，效果图如下

npm run make