本文章适用于用Cli3脚手架搭建的项目，这里我拿已有项目为例，所以项目搭建之类的就不在这里一一描述了。

当初在接触的时候，网上一堆electron-vue的文档，但是我并不推荐使用，因为看了下更新时间，已经有7个月没有更新了，而且脚手架还是老的，不是特别的新。

electron-vue

Owner：SimulatedGREG

Updated：2024-11-19 23:53

Watch：15475

Star：15475

Fork：1548

An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.

这里我比较推荐vue-cli-plugin-electron-builder，使用方便，而且感觉还在持续更新。

vue-cli-plugin-electron-builder

Owner：nklayman

Updated：2024-11-21 09:04

Watch：4119

Star：4119

Fork：278

Easily Build Your Vue.js App For Desktop With Electron

准备工作，切换淘宝源

在项目根目录新建.npmrc文件：

disturl=https://npm.taobao.org/mirrors/node/
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
sharp_dist_base_url=https://npm.taobao.org/mirrors/sharp-libvips/
electron_mirror=https://npm.taobao.org/mirrors/electron/
puppeteer_download_host=https://npm.taobao.org/mirrors/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
sentrycli_cdnurl=https://npm.taobao.org/mirrors/sentry-cli/
sqlite3_binary_site=https://npm.taobao.org/mirrors/sqlite3/
python_mirror=https://npm.taobao.org/mirrors/python/
registry=https://registry.npm.taobao.org

这里我把常用的源都切换到了淘宝镜像，方便以后其他项目有用。

安装Electron

进入到项目根目录，执行：

vue add electron-builder

选择最新的版本即可。

安装完成之后，你会发现package.json会多出了几个scripts命令，并且src目录下会自动增加background.js这个文件。

安装依赖

npm install

编译并启动

npm run electron:serve

首次启动比较慢，耐心等待即可。

Electron 配置

常规的配置基本上都在background.js中

取消跨域限制

win = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: true,
    webSecurity: false
  }
})

设置窗口图标

准备windows和macOS两版图标。

• windows: app.ico 最小尺寸：256x256
• macOS: app.png或app.icns 最小尺寸：512x512

把图标文件放到public目录下：

|- /dist_electron
  （略）
|- /public
   |- app.icns  
   |- app.ico
   |- app.png
   |- favicon.ico
   |- index.html
|- /src
  （略）
|- .editorconfig    
|- .eslintrc.js
|- .gitignore
|- babel.config.js
|- package.json
|- package-lock.json
|- README.md

win = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: true,
    webSecurity: false
  },
  icon: `${__static}/app.ico`
})

打包配置

修改vue.config.js，这里我就把修改的部分放出来：

pluginOptions: {
  electronBuilder: {
    builderOptions: {
      "appId": "com.wangdaodao.app",
      "productName": "AppDemo ", //项目名，也是生成的安装文件名
      "copyright": "Copyright © 2020", //版权信息
      "directories": {
        "output": "./dist_electron" //输出文件路径
      },
      "win": { //win相关配置
        "icon": "./public/app.ico", //图标，当前图标在根目录下，注意这里有两个坑
        "target": [
          {
            "target": "nsis", //利用nsis制作安装程序
            "arch": [
              "x64", //64位
              "ia32" //32位
            ]
          }
        ]
      },
      "mac": {
        "icon": "./public/app.png"
      },
      "nsis": {
        "oneClick": false, // 是否一键安装
        "allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
        "allowToChangeInstallationDirectory": true, // 允许修改安装目录
        "installerIcon": "./public/app.ico", // 安装图标
        "uninstallerIcon": "./public/app.ico", //卸载图标
        "installerHeaderIcon": "./public/app.ico", // 安装时头部图标
        "createDesktopShortcut": true, // 创建桌面图标
        "createStartMenuShortcut": true, // 创建开始菜单图标
        "shortcutName": "AppDemo", // 图标名称
      },
    }
  }
}

打包APP

npm run electron:build

最终在dist_electron目录下生成build后的产品。

/dist_electron
|- /bundled
  （略）
|- /win-unpacked  <-- 绿色版
  （略）
|- AppDemo Setup 0.1.0.exe  <-- 安装文件
|- AppDemo Setup 0.1.0.exe.blockmap
|- builder-effective-config.yaml
|- index.js

只是一个简单的demo，打出来的包就95M了，有点恐怖，下一步就得优化包的体积了。

demo地址：https://github.com/wangdaodao/vue-electron-template

另外，评论里面有朋友说无法跨域，这次我测试了一下，确实设置webSecurity: false也是无法解决跨域的问题，这是Electron 9.0.0的一个bug，这里有两种解决方案：

1. 把Electron降级到8.5.0，可以解决跨域问题。

2. 在background.js中加入如下代码

   app.commandLine.appendSwitch('disable-features', 'OutOfBlinkCors');