Electron创建项目（Electron打包配置）

发表于 | 分类于
Electron创建项目（Electron打包配置）

前言

方式

  1. 不使用webpack
  2. Vue Cli3 + vue-cli-plugin-electron-builder
  3. Webpack+HTML+JS

怎么选择

方式2适合单窗口的项目，注意一定不要创建多个窗口加载不同的路由，这样会特别的占用内存。

方式3适合多个窗口的项目，这样每个窗口占用的内存都会降下来。

设置镜像

查看配置文件的位置

1
2
npm config list
npm config set electron_mirror https://repo.huaweicloud.com/electron/

可以查看到本机的userconfig在哪，即.npmrc文件在哪

比如我的

1
userconfig C:\Users\18351\.npmrc

打开该文件 添加

1
2
3
registry=http://registry.npm.taobao.org/
electron_mirror=https://repo.huaweicloud.com/electron/
strict-ssl=false

注意：

阿里的electron镜像在打包的时候有问题，这里使用华为的。

打包设置

添加打包工具

1
npm install electron-builder@22.9.1 --save-dev

在package.json中做如下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
{
    "name": "excel-tool",
    "version": "1.0.0",
    "description": "",
    "main": "main.js",
    "scripts": {
        "start": "electron .",
        "dist": "electron-builder --win --ia32",
        "dist_dir": "electron-builder --dir --win --ia32"
    },
    "build": {
        "electronDownload": {
            "mirror": "https://repo.huaweicloud.com/electron/"
        },
        "appId": "cn.psvmc.exceltool",
        "mac": {
            "target": [
                "dmg",
                "zip"
            ]
        },
        "win": {
            "icon": "app.ico",
            "target": [
                "zip",
                "nsis"
            ]
        },
        "nsis": {
            "oneClick": false,
            "allowElevation": true,
            "allowToChangeInstallationDirectory": true,
            "installerIcon": "app.ico",
            "uninstallerIcon": "app.ico",
            "installerHeaderIcon": "app.ico",
            "createDesktopShortcut": true,
            "createStartMenuShortcut": true,
            "license": "LICENSE.txt"
        },
        "files": [
            "build/*",
            "main.js",
            "*.html",
            "static",
            "image",
            "app.ico",
            "node_modules/**/*"
        ]
    },
    "devDependencies": {
        "electron": "~11.1.1",
        "electron-builder": "~22.9.1"
    }
}

注意

LICENSE.txt 文件的内容不能为空。

如果打包时依赖无法下载：

下载地址:

https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z

https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z

我么可以用其他软件下载，

https://github.com/electron-userland/electron-builder-binaries/releases/

下载后放到

C:\Users\18351\AppData\Local\electron\Cache\f0b1d19ed4c2bbba116e1245a7ca6143c132b885dbd6620e14e9c5b32d7cb569

C:\Users\18351\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-2.6.0

C:\Users\18351\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1

C:\Users\18351\AppData\Local\electron-builder\Cache\nsis\nsis-resources-3.4.1

注意一定要解压缩，用户名根据自己的系统为准。

百度云下载地址

链接：https://pan.baidu.com/s/1sGbardIdKjZT0tuhoELbYA
提取码：psvm

静态页面

不使用Webpack

步骤

1
2
git clone https://gitee.com/psvmc/electron-quick-start.git
mv .\electron-quick-start .\electron-excel-tool

配置下载32位的electron

项目根目录添加.npmrc文件

1
2
arch=ia32
registry=https://registry.npm.taobao.org

安装依赖启动

1
2
3
cd electron-excel-tool
npm install
npm start

配置文件

创建窗口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
const { app, BrowserWindow } = require('electron')

// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let win

function createWindow () {
    // 创建浏览器窗口。
    win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            nodeIntegration: true,
            enableRemoteModule: true,
            webSecurity: false,
            contextIsolation: false,
        }
    })

    // 加载index.html文件
    win.loadFile('index.html')

    // 打开开发者工具
    win.webContents.openDevTools({mode: 'detach'});

    // 当 window 被关闭，这个事件会被触发。
    win.on('closed', () => {
        // 取消引用 window 对象，如果你的应用支持多窗口的话，
        // 通常会把多个 window 对象存放在一个数组里面，
        // 与此同时，你应该删除相应的元素。
        win = null
    })
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
    // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
    // 否则绝大部分应用及其菜单栏会保持激活。
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    // 在macOS上，当单击dock图标并且没有其他窗口打开时，
    // 通常在应用程序中重新创建一个窗口。
    if (win === null) {
        createWindow()
    }
})

// 在这个文件中，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。

不显示菜单栏

1
2
3
4
5
const electron = require('electron')
/*获取electron窗体的菜单栏*/
const Menu = electron.Menu
/*隐藏electron创听的菜单栏*/
Menu.setApplicationMenu(null)

图片建议放在项目根目录下建一个static文件夹，加载图片类似

1
<script src="static/vue.js"></script>

页面中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
new Vue({
    el: ".index_outer",
    data: {
        list: [],
    },
    mounted () {

    },
    watch: {

    },
    methods: {

    }
});

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Excel工具</title>
      <link rel="stylesheet" href="static/css/index.css">
  </head>
  <body>
   <div class="index_outer">
     <div v-for="(item,index) in list" :key="index">{{item}}</div>
   </div>
    <script src="static/vue.js"></script>
    <script src="static/index.js"></script>
  </body>
</html>

单窗口项目

注意

这里的单窗口项目是可以有多个页面的，可以内部路由跳转。

详情参见：https://www.psvmc.cn/article/2019-11-05-vue-cli3-electron.html

1
vue ui

创建项目后，安装插件

vue-cli-plugin-electron-builder

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
{
  "name": "paper-optimization",
  "version": "0.1.3",
  "private": true,
  "scripts": {
    "electron:build": "vue-cli-service electron:build --win --ia32",
    "electron:dist_dir": "vue-cli-service electron:build --dir --win --ia32",
    "electron:serve": "vue-cli-service electron:serve"
  },
  "main": "background.js",
  "dependencies": {
    "vue": "^2.6.11",
    "crypto-js": "^4.1.1",
    "getmac": "^5.20.0",
    "md5": "^2.3.0",
    "request": "^2.88.2",
    "view-design": "^4.7.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "electron": "^7.1.2",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "prettier": "^1.19.1",
    "vue-cli-plugin-electron-builder": "^2.0.0-rc.5",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/prettier"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

根目录添加vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        appId: "cn.psvmc.paperoptimization",
        productName: "论文优化大师",
        icon: "./app.ico",
        asar: true,
        mac: {
          icon: "./app.ico",
          target: ["zip", "dmg"]
        },
        win: {
          icon: "./app.ico",
          target: ["zip", "nsis"]
        },
        nsis: {
          oneClick: false,
          allowElevation: true,
          allowToChangeInstallationDirectory: true,
          installerIcon: "./app.ico",
          uninstallerIcon: "./app.ico",
          installerHeaderIcon: "./app.ico",
          createDesktopShortcut: true,
          createStartMenuShortcut: true,
          license: "./LICENSE.txt"
        }
      }
    }
  }
};

多窗口项目(Webpack)

下载项目

1
2
3
4
git clone https://gitee.com/psvmc/electron-quick-start.git
cd electron-quick-start
npm install
npm start

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
{
  "name": "mytest",
  "productName": "程序名",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "build": {
    "asar": true,
    "extraResources": [
      "./extraResources/**"
    ],
    "files": [
      "build/*",
      "main.js",
      "*.html",
      "image",
      "app.ico",
      "node_modules/**/*"
    ],
    "appId": "cn.psvmc.mytest",
    "win": {
      "icon": "app.ico",
      "target": [
        "zip"
      ]
    },
    "mac": {
      "hardenedRuntime": false
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "app.ico",
      "uninstallerIcon": "app.ico",
      "installerHeaderIcon": "app.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "license": "LICENSE.txt"
    }
  },
  "scripts": {
    "start": "webpack --mode development && cross-env ELECTRON_DISABLE_SECURITY_WARNINGS=true electron .",
    "webpack": "webpack --mode development",
    "hot": ".\\node_modules\\.bin\\gulp watch:electron",
    "dist": "webpack --mode development && electron-builder --win --ia32",
    "dist_dir": "webpack --mode development && electron-builder --dir --win --ia32"
  },
  "agora_electron": {
    "electron_version": "10.2.0",
    "platform": "win32",
    "prebuilt": true,
    "arch": "ia32"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^0.25.0",
    "electron": "^10.2.0",
    "electron-builder": "^22.9.1",
    "electron-reload": "^2.0.0-alpha.1",
    "file-loader": "^6.2.0",
    "gulp": "^4.0.2",
    "less": "^4.1.0",
    "less-loader": "^5.0.0",
    "style-loader": "^2.0.0",
    "vue-loader": "^14.2.4",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.4.0"
  },
  "dependencies": {
    "agora-electron-sdk": "latest",
    "axios": "^0.21.1",
    "crypto-js": "^4.0.0",
    "echarts": "^4.8.0",
    "electron-log": "^4.3.5",
    "view-design": "^4.5.0",
    "vue": "^2.6.12"
  }
}

注意

build=>files这里配置所有需要打包的文件，一定不要漏了。

图片建议放在项目根目录下建一个image文件夹，加载图片类似

1
<img src="image/123.png"/>

这样可以保证打包前和打包后运行图片都是可以访问。

项目根目录下添加webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
const path = require("path");

function resolve(dir) {
    return path.join(__dirname, dir);
}

module.exports = {
    entry: {
        login: "./src/login.js",
        home: "./src/home.js",
    },
    output: {
        path: __dirname + "/build",
        publicPath: "build/",
        filename: "[name].js",
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: "vue-loader",
            },
            {
                test: /\.(png|jpg|gif|svg|woff|ttf|woff2)$/,
                loader: "file-loader",
                options: {
                    esModule: false,
                    query: {
                        name: "[name].[ext]?[hash]",
                    },
                },
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: ['vue-style-loader',"style-loader", "css-loader", "less-loader"],
            },
        ],
    },
    resolve: {
        extensions: [".js", ".vue", ".json"],
        alias: {
            "@": resolve("src"),
        },
    },
};

注意

这里entry中配置每个页面需要打包的JS

output设置输出的JS的目录和文件名

把HTML放在根目录

v_login.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>登录</title>
</head>
<body>
<div id="app">
</div>
<script src="build/login.js"></script>

<style>
    body {
        background-color: transparent;
    }
</style>
</body>
</html>

注意

这里的login.js是Webpack打包后生成的js。

login.js

1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'
import App from './login.vue'
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';

Vue.use(ViewUI);

new Vue({
    el: '#app',
    render: h => h(App)
})

login.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<template>
  <div>

  </div>
</template>

<script>
const {ipcRenderer, shell} = window.require("electron");

export default {
  name: "login.vue",
  data: function () {
    return {
      loginname: "",
      loginpwd: "",
    };
  },
  mounted() {
  },
  methods: {
  },
};
</script>
<style>
body {
  margin: 0;
  padding: 0;
  -webkit-app-region: drag;
  -webkit-user-select: none;

  overflow: hidden;
  width: 100vw;
  height: 100vh;
}
</style>

<style lang='less' scoped>

</style>