electron+vue项目搭建

前言

本文搭建基于vue cli提供的vue-cli-plugin-electron-builder进行脚手架搭建。如果你是一个前端开发，想把现有页面转化成桌面软件，并且能有win，mac，linux的版本，那么electron不失为一个好的选择。

开发前的准备

说到底electron本质上就是一个基于Chromium的应用，通俗点说，这个桌面软件就是一个浏览器，我们写的东西在浏览器中展示，在开发前你得知道前端三驾马车 HTML, CSS 和 JavaScript，涉及到一些文件等特殊的处理的话那么会有些许node的知识，electron能直接调用node，这是浏览器所不能做的。

安装

# 设置淘宝源
npm install --registry=https://registry.npm.taobao.org
# 需要注意的是electron的本体下载并不是走这里所以还是要去设置一下
npm config edit
# 该命令会打开npm的配置文件，请在空白处添加
registry=https://registry.npm.taobao.org/
electron_mirror=https://cdn.npm.taobao.org/dist/electron/ 
ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/

# 安装vue-cli
npm install -g @vue/cli

# 创建vue项目
vue create electron-vue
# 自行选择vue版本，由于electron使用的是Chromium，那么我们可以不必考虑兼容性的问题
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: 'electron-vue-cli',
      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包失败，请参考安装前几步，设置淘宝源和设置electron本体下载)。

环境变量配置

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.1.1:8080'
} else if (config.VUE_APP_ENV === 'test') {
  config.host = 'http://192.168.1.1:8080'
} else if (config.VUE_APP_ENV === 'production') {
  config.host = 'http://192.168.1.1: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，严格按照安装步骤来，重新npm install

本文源码gitee地址：gitee.com/ldlw/electr…

关注作者： 微信搜【学好前端】公众号，即可以获取作者微信，加技术交流群