electron-vue 安装环境、构建+打包（mac和windows）这一篇就够了

由于公司需要，下一个项目需要做CS开发，技术选型分析后，选择了electron（Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架）

研究发现，electron与vue-cli3.0脚手架做了很好的融合，对于我们这种用惯了vue，以及elementUI这些UI框架的Web前端开发工程师来说，实在太友好了，不过，这是一门国外框架技术 ，不仅是环境搭建、安装、文档，都是比较难入手的，坑也比较多，今天捣鼓了一天，终于把框架、环境、打包什么的问题解决了，不断的百度，百度，再百度，在下班之际，把今天自己遇到的问题、安装步骤、解决方法，回顾了一遍，写了这篇博客，方便以后自己翻阅巩固，也为大家提供帮助！

准备环境：

1、nodejs

1、安装cnpm、yarn

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

2、修改yarn的镜像

yarn config set registry https://registry.npm.taobao.org -g

 3、设置electron的yarn镜像（要不然安装依赖会出错）

1. 打开C盘下的用户目录（mac就在用户目录下，需要显示隐藏文件），找到~/.yarnrc文件，将lastUpdateCheck 删掉：
2. 添加 electron_mirror "https://npm.taobao.org/mirrors/electron/"
3. lastUpdateCheck 1549116918628 # 删掉 删掉
4. 

4、开始搭建electron-vue

1、搭建vue-cli3.0的脚手架，脚手架搭建就不多说了。vue create myApp

2、进入根目录：vue add electron-builder

3、选择Electron版本。选择 “^9.0.0”（最新版）。

      然后耐心等待安装完成。如果中间出现错误中断了，请重复此步骤。

      安装完成后会自动在src目录下生成background.js并修改了package.json。

5、在src目录下新建background.js

'use strict'

import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
    }
  })
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
  }
}

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}

6、根目录下新建vue.config.js

1、注意：下方的icon图标，一定要不小于256x256的ico格式图标，否则打包出错

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        'appId': 'mzDemo.com',
        'productName': 'mzDemo', // 项目名，也是生成的安装文件名，即mzDemo.exe
        'copyright': 'amaosky Copyright © 2020', // 版权信息
        'files': [
          './**/*'
        ],
        'extraFiles': [ // 把指定的资源复制到程序根目录，即把server文件夹的内容复制到程序根目录，这里server文件夹下的内容相当于我的后台，我在background.js中有相应的处理。
          './server'
        ],
        'directories': {
          'output': './app_dist' // 输出文件路径
        },
        'win': { // win相关配置
          'icon': './public/favicon.ico', // 图标，当前图标在根目录下，注意这里有两个坑
          "requestedExecutionLevel": "requireAdministrator", //获取管理员权限
          'target': [{
            'target': 'nsis', // 利用nsis制作安装程序
            'arch': [
              'x64', // 64位
              'ia32'
            ]
          }]
        },
        'nsis': {
          'oneClick': false, // 是否一键安装
          'allowElevation': true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
          'allowToChangeInstallationDirectory': true, // 允许修改安装目录
          'installerIcon': './favicon.ico', // 安装图标
          'uninstallerIcon': './favicon.ico', // 卸载图标
          'installerHeaderIcon': './favicon.ico', // 安装时头部图标
          'createDesktopShortcut': true, // 创建桌面图标
          'createStartMenuShortcut': true, // 创建开始菜单图标
          'shortcutName': 'mzDemo' // 图标名称(项目名称)
        }
      }
    }
  }
}

7、安装依赖包yarn install (别用npm、cnpm，有坑)

8、运行（此时mac下已经可以运行、打包了，windows下还有些依赖包的问题）

1. 执行：npm run electron:serve 即可运行web端和app端
2. 执行：npm run electron:build 即可打包 （mac下此时打包已经没有问题了，但是windos下打包问题还会有，主要是一些依赖包、nsis打包等问题）
3. 

8、windows打包环境解决，手动安装build环境依赖包（要不然太慢了，会失败）

到淘宝npm镜像官网https://npm.taobao.org/mirrors下载

根据安装的electron版本实际情况去解决。有很多版本的，自己注意，我也是直接npm run electron:build发现的这些问题

1. 清除electron和electron-builder的cache缓存记录（删除文件夹中旧的缓存资源包）。

• eledtron缓存资源地址：~/AppData/Local/electron/Cache

• electron-builder缓存资源地址：~/AppData/Local/electron-builder/Cache

• 下载好缓存资源包后，存储到对应的cache文件中。

• 

• nsis，一样的步骤，根据npm run build的错误提示，去淘宝镜像找到对应的版本，替换到Cache里

• 

9、windows打包

注意：整个项目下最好不要出现中文路径，否则打包会出问题。

到这个时候，windows下打包应该也没什么问题了，直接上图！

10、mac打包 

谢谢浏览