• 环境要求
    • node.js
    • yarn
    • vue-cli (use yarn global add @vue/cli)

一、使用vue-cli创建项目，并安装electron-builder到项目

1.创建项目

vue create 项目名称(也是项目目录名称)

选择Vue版本(Vue 3还是预览版，所以这里选择的是Vue 2)

Vue CLI v4.5.12
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features
Vue CLI v4.5.12
✨  Creating project in 项目目录.
?  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.10
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
                                                                                                                        success Saved lockfile.
Done in 13.05s.
?  Invoking generators...
?  Installing additional dependencies...

yarn install v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 4.65s.
⚓  Running completion hooks...

?  Generating README.md...

?  Successfully created project update-pc-config-editor.
?  Get started with the following commands:

 $ cd 项目目录
 $ yarn serve

2.安装electron到项目

cd 项目目录
vue add electron-builder

选择electron版本，这里选择的最新11.0.0版

...
✔  Successfully installed plugin: vue-cli-plugin-electron-builder

? Choose Electron Version (Use arrow keys)
  ^9.0.0
  ^10.0.0
> ^11.0.0
? Choose Electron Version ^11.0.0

?  Invoking generator for vue-cli-plugin-electron-builder...
?  Installing additional dependencies...

yarn install v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
info dmg-license@1.0.8: The platform "win32" is incompatible with this module.
info "dmg-license@1.0.8" is an optional dependency and failed compatibility check. Excluding it from installation.
info iconv-corefoundation@1.1.5: The platform "win32" is incompatible with this module.
info "iconv-corefoundation@1.1.5" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
$ electron-builder install-app-deps
  • electron-builder  version=22.10.5
  • cannot check updates  error=TypeError: update_notifier_1.default is not a function
Done in 9.69s.
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-electron-builder

删除根目录下隐藏文件夹.git

二、项目配置

1.关闭eslint

打开项目根目录下package.json文件

"eslintConfig": {
    "root": true, //这里改成false
    "env": {
      "node": true //这里改成false
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },

除此之外，还要在下面配置文件里关闭

2.添加配置文件(加关闭eslint)

在项目根目录下创建文件vue.config.js

module.exports = {
    lintOnSave: false, //关闭eslint
    // 修改或新增html-webpack-plugin的值，在index.html里面能读取htmlWebpackPlugin.options.title
    chainWebpack: config =>{
        config.plugin('html').tap(args => {
            args[0].title = '你想要设置的title'; //窗口title
            return args;
        })
    },
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
                "appId": "com.example.app",
                "productName":"xxx",//项目名，也是生成的安装文件名，即xxx.exe
                "copyright":"Copyright © 2021",//版权信息
                /*"directories":{ //这里我不需要更换输出路径，所以注释掉，默认输出目录为 ./dist_electron
                    "output":"./dist"//输出文件路径
                },*/
                "win":{//win相关配置
                    //"icon":"./public/favicon.ico",//图标，这里注释掉了以使用默认ico
                    "target": [
                        {
                            "target": "nsis", //使用nsis打包安装程序
                            "arch": [
                                "x64",//64位
                                //"ia32"//32位
                            ]
                        }
                    ]
                }
            }
        }
    }
}

3.增加生成dir的命令

在package.json的scripts下增加

"electron:build:dir": "vue-cli-service electron:build --dir",

4.运行及打包

运行

yarn electron:serve

编译(不打包)

yarn electron:build:dir

编译并打包

yarn electron:build

三、其他配置

安装element-ui

yarn add element-ui

在main.js添加如下代码

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

安装scss支持

最新版本暂时有问题，所以这里安装的是指定版本

yarn add node-sass@^4.9.2 sass-loader@^7.0.3 -D

取消标题栏

在background.js中，BrowserWindow的options中增加frame: false

取消菜单栏

在background.js中，createWindow()中增加代码

win.setMenu(null)

解决无法使用require的问题

error 'require' is not defined
在background.js中，BrowserWindow的options中增加

webPreferences: {
    nodeIntegration: true
}

然后改用window.require如

const { xxx } = window.require('electron')

解决无法使用remote

如

remote.getCurrentWindow()

报错
Cannot read property 'getCurrentWindow' of undefined"

在background.js中，BrowserWindow的options中增加

webPreferences: {
    enableRemoteModule: true
}

四、其他坑

1.打包时卡在下载winCodeSign-v.xxx.7z文件(或下载失败)

手动下载文件，然后带文件夹解压到目录

C:\Users\你的用户名\AppData\Local\electron-builder\Cache\winCodeSign

注意是带文件夹解压，比如最终解压的文件是在该目录下

C:\Users\你的用户名\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-2.6.0

最后更新于 2023-07-15
啥也没有呀