electron套壳vue2项目

原文地址 点击这里

https://zhuanlan.zhihu.com/p/680967871

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.要确定好打包的位置，要与 background.js 里 loadFile 函数的地址对上。

2.如果是window系统，需要在 vue.config.js 里将 publicPath 字段默认值改为 ./，不然会出现打包完成后页面空白现象。因为window会将/识别为上一级目录。（这点说的是新建的项目，因为vue默认路径是/）

npm run build

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

https://zhuanlan.zhihu.com/p/680967871