Vue项目用Electron改造为桌面客户端

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

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

electron-vue
electron-vue
Owner:SimulatedGREG
Updated:2024-03-28 04:13
Watch:15437
Star:15437
Fork:1540
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
vue-cli-plugin-electron-builder
Owner:nklayman
Updated:2024-03-27 14:08
Watch:4093
Star:4093
Fork:271
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

2020-07-07T12:52:34.png

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

2020-07-07T12:51:37.png

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');

已有 4 条评论

  1. 哈哈哈 哈哈哈
    回复

    这个才真有用

  2. 951871040@qq.com 951871040@qq.com
    回复

    找了好久的nsis配置,居然要配置到vue.config.js中,感谢

  3. 嗯嗯 嗯嗯
    回复

    这个有跨域问题

    1. 王叨叨 王叨叨 [作者]
      回复

      跨域问题,Electron 9的问题,建议降级到8.5.0:https://github.com/electron/electron/issues/23664

添加新评论