Electron项目搭建

Posted 2021-09-27 陌路凡歌

博客鸽了挺久了，最近准备更新一下electron的开发。

本文搭建基于vue cli提供的vue-cli-plugin-electron-builder进行脚手架搭建。

electron的优点和缺点已经有各种分析了，这里不再多述，如果你是一个前端开发，想把现有页面转化成桌面软件，并且能有win，mac，linux的版本，那么electron不失为一个好的选择，当然一个多端的框架优缺点都是很明显的，既然想快速开发那么就得舍弃点东西，比如体积大小，性能等等。

开发前的准备

说到底electron本质上就是一个基于Chromium的应用，通俗点说，这个桌面软件就是一个浏览器，我们写的东西在浏览器中展示，是不是一下子就回到熟悉领域了，那么在开发前你得知道前端三驾马车 html, CSS 和 javascript，涉及到一些文件等的处理的话那么会有些许node的知识。

安装

npm install -g @vue/cli
vue create electron-vue
# 自行选择vue版本，由于electron使用的是Chromium，那么我们可以不必考虑兼容性的问题，我这里直接选择vue3（看个人喜好）
cd electron-vue
vue add electron-builder
# 选择electron版本号，这里我选择的是`11.0.0`
# 安装完成之后会有`src/background.js`文件，`package.json`中会多出几条electron的build及serve命令
npm run electron:serve
# 稍等一会儿（Vue Devtools首次安装问题）会有一个桌面窗口出现，ok安装就完成啦，接下来我们对其进行改造。

说明

改造前说明一下：electron开发和我们普通的开发有所不同，它是有两种进程的：主进程和渲染进程

• 主进程src/background.js：管理所有渲染进程（怎么配置桌面软件，怎么打开桌面软件，怎么相互通信等等）。
• 渲染进程：说得直白点就是网页（就是打开我们单页的网页）

npm run electron:serve做了什么，其实就是类似先运行npm run serve启动一个网页的端口并生成一个实时打包的js，然后通过electron的命令指定启动的js，用主进程载入网页的端口。
通俗点来说，你可以理解为我们开发的桌面软件是一个浏览器，主进程就是设置这个浏览器的样式（图标，大小等等），渲染进程就是浏览器打开的网页。

改造

src目录改造

首先我们在src目录下新建两个文件夹src/main、src/renderer，这两个分别放主进程及渲染进程的文件，然后把src/background.js放入src/main中，然后重命名为index.js，src下其他文件放入src/renderer中。
现在的结构如下：

├─src                          # 源码目录
│  ├─main                      # 主进程目录
│  │  └─index.js               # 主进程入口
│  └─renderer                  # 渲染进程文件夹
│      ├─assets
│      ├─components
│      ├─App.vue
│      └─main.js                # 渲染进程入口

添加vue.config.js

由于我们修改了默认的入口文件位置，我们应该配置对应的参数，
在根目录新建vue.config.js，添加

module.exports = {
  pluginOptions: {
    electronBuilder: {
      mainProcessFile: \'src/main/index.js\', // 主进程入口文件
      rendererProcessFile: \'src/renderer/main.js\', // 渲染进程入口文件
      mainProcessWatch: [\'src/main\'], // 检测主进程文件在更改时将重新编译主进程并重新启动
    }
  }
}

然后重新npm run electron:serve，看能否重新启动。

补充：如果是只打包单页electron的话这样配置没问题，但是这样的话想对web页面打包(npm run build)会有问题，因为我们把入口文件位置修改了。

这里我们可以通过设置pages来修改其入口文件，并且这样还可以打包多页

module.exports = {
   pages: {
    index: {
      entry: \'src/renderer/main.js\',
      template: \'public/index.html\',
      filename: \'index.html\',
      title: \'vue-cli-electron\',
      chunks: [\'chunk-vendors\', \'chunk-common\', \'index\']
    },
    // loader: \'src/loader/main.js\' // 多页loader页
  },
  pluginOptions: {
    electronBuilder: {
      mainProcessFile: \'src/main/index.js\', // 主进程入口文件
      mainProcessWatch: [\'src/main\'], // 检测主进程文件在更改时将重新编译主进程并重新启动
    }
  }
}

注：如果添加了pages，请把electronBuilder里的rendererProcessFile删除，两个都是web页面的入口，是互斥的。

尝试分别运行web的serve、build及electron的serve、build，看是否能成功运行(打包可能会因为网络原因，下载electron包失败，如果未添加.npmrc请参考结尾补充)。

环境变量配置

vue cli可以通过--mode xx来读取.env.xx设置环境变量参考，在根目录新建

.env  # 本地开发
.env.dev  # 打包dev
.env.test  # 打包test
.env.prod  # 打包prod

.env:
NODE_ENV=development
VUE_APP_ENV=development
VUE_APP_APPID=com.electron.electronVueDEV
VUE_APP_PRODUCTNAME=electron开发
VUE_APP_VERSION=0.0.1
BASE_URL=/

注：.env 的NODE_ENV设置development，其余打包的请设置production
NODE_ENV: webpack运行的模式
VUE_APP_ENV：我们自己使用的环境变量(通过这个判断我们是什么环境)，比如.env.test为VUE_APP_ENV=test，.env.prod为VUE_APP_ENV=production
VUE_APP_APPID：electron的appId配置，com.electron.electronVueDEV，com.electron.electronVueTEST，com.electron.electronVue
VUE_APP_PRODUCTNAME：electron的productName配置，electron开发，electron测试，···
VUE_APP_VERSION：electron的version配置

修改package.json的scripts，删除原来的打包命令，新增：

web的打包：
"build:dev": "vue-cli-service build --mode dev",
"build:test": "vue-cli-service build --mode test",
"build:prod": "vue-cli-service build --mode prod",

electron的打包：
"build:dev:win32": "vue-cli-service electron:build --mode dev --win --ia32",
"build:dev:win64": "vue-cli-service electron:build --mode dev --win --x64",
"build:test:win32": "vue-cli-service electron:build --mode test --win --ia32",
"build:test:win64": "vue-cli-service electron:build --mode test --win --x64",
"build:prod:win32": "vue-cli-service electron:build --mode prod --win --ia32",
"build:prod:win64": "vue-cli-service electron:build --mode prod --win --x64",
"build:dev:mac": "vue-cli-service electron:build --mode dev --mac",
"build:test:mac": "vue-cli-service electron:build --mode test --mac",
"build:prod:mac": "vue-cli-service electron:build --mode prod --mac",

electron打包这里只配置了win32，win64，mac的打包，如果对其他模式的包有需求的请参考链接自行配置。

环境变量检测及打包配置

添加config配置

新增renderer/config/index.js，

const env = process.env

const config = {
  host: \'\',
  baseUrl: \'\'
}

Object.assign(config, env)

// if (env.NODE_ENV === \'development\') {
//   config.VUE_APP_ENV = \'test\'
// }

if (config.VUE_APP_ENV === \'development\') {
  config.host = \'http://192.168.148.174:8080\'
} else if (config.VUE_APP_ENV === \'test\') {
  config.host = \'http://192.168.148.175:8080\'
} else if (config.VUE_APP_ENV === \'production\') {
  config.host = \'http://192.168.148.176:8080\'
}

export default config

本地开发切换环境，可以使用上面注释的方法修改，也可以直接修改.env文件的VUE_APP_ENV。

打包配置

src/renderer/App.vue添加import cfg from \'@/config\'，打印cfg

vue.config.js添加

const path = require(\'path\')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  chainWebpack: (config) => { // 由于我们修改了渲染进程目录，修改\'@\'的alias
    config.resolve.alias.set(\'@\', resolve(\'src/renderer\'))
  },
  builderOptions: {
    appId: process.env.VUE_APP_APPID,
    productName: process.env.VUE_APP_PRODUCTNAME,
    extraMetadata: {
      name: process.env.VUE_APP_APPID.split(\'.\').pop(),
      version: process.env.VUE_APP_VERSION
    },
    asar: true,
    directories: {
      output: "dist_electron",
      buildResources: "build",
      app: "dist_electron/bundled"
    },
    files: [
      {
        filter: [
          "**"
        ]
      }
    ],
    extends: null,
    electronVersion: "11.3.0",
    extraResources: [],
    electronDownload: {
      mirror: "https://npm.taobao.org/mirrors/electron/"
    },
    dmg: {
      contents: [
        {
          type: "link",
          path: "/Applications",
          x: 410,
          y: 150
        },
        {
          type: "file",
          x: 130,
          y: 150
        }
      ]
    },
    mac: {
      icon: "public/icons/icon.icns"
    },
    nsis: {
      oneClick: false,
      perMachine: true,
      allowToChangeInstallationDirectory: true,
      warningsAsErrors: false,
      allowElevation: false,
      createDesktopShortcut: true,
      createStartMenuShortcut: true
    },
    win: {
      target: "nsis",
      icon: "public/icons/icon.ico",
      requestedExecutionLevel: "highestAvailable"
    },
    linux: {
      "icon": "public/icons"
    },
    publish: {
      provider: "generic",
      url: "http://127.0.0.1"
    }
  }
  ............
}

builderOptions是electron的打包配置，参考链接，之前打包的话由于网络原因，下载electron包可能会下载失败或特慢，这里配置electronDownload为淘宝源，本来electron的name及version是读取package.json里面的值的，这里使用extraMetadata把这两个值注入进package.json，其他配置可自行修改。

icons

打包是需要icons的，windows呢需要.ico，mac需要icns，你可以使用icofx进行生成(后续有时间的话会补充)，这里呢我使用的是一个插件直接生成的

yarn add -D electron-icon-builder
package.json添加
"icons": "electron-icon-builder --input=./public/icons/icon.png --output=public --flatten",

在public下新建icons文件夹，再把你的icon.png(512*512)放在里面，运行npm run icons就会在icons里面生成对应的图片了。

最后：运行打包命令，分别打dev，test，prod包安装，打开软件查看打印的cfg是否正确。

补充

如果使用npm install或yarn install出现错误时，一般来说是网络问题，先删除node_modules，然后在根目录新建.npmrc文件

electron_mirror=https://npm.taobao.org/mirrors/electron/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/

注意不要使用cnpm安装，可能会出现各种问题。

本文地址：https://xuxin123.com/electron/create

本文github地址：链接