前言⁍

本文旨在{ %post_link Electron-vue开发实战（一）- 入门与安装(踩坑实录) %}中提及的基本安装方法上尝试改进，在不变换nodeJs环境的基础上，完成对Electron-vue环境和ElementUI/Element-theme的安装和配置

配置vue脚手架和electron框架⁍

这部分与前文一致

1
2
3
4
# 如果你没有vue-cli的话需要全局安装
npm install -g vue-cli
# 然后使用vue-cli来安装electron-vue的模板
vue init simulatedgreg/electron-vue my-project

另外还可以使用离线安装的方式进行[1]，

下载模板源码

https://github.com/SimulatedGREG/electron-vue

下载后解压存放在 用户目录/.vue-templates/ 下（没有就创建，注意复数s），形成如下的结构：

1
2
3
4
5
6
{用户目录}/
  .vue-templates/
     electron-vue-master/（目录名随便，但是在待会儿init指定的时候需要一致）
       .github/
       template/
       ....

之后就可以使用离线（offline）模式创建：

1
vue init --offline electron-vue-master electron-vue-demo # 名称和上述文件夹名称一致即可

根据向导创建的过程中有个

1
? Use Sass / Scss? （是否使用Sass/Scss编译器）

的问题，原文作者选了No。

我认为选No或许可以省掉一堆事，用css写样式文件就好啦。不过为了Element-theme定制主题，或许还是该选Yes。

package.json修改⁍

根据 Post not found: 【杂记】Node-sass、Node.JS版本管理以及其他，我们不想再安装node-sass，而是改为dart-sass

修改package.json，去掉node-sass包，直接改成

1
"sass": "^1.49.9"

我项目中package.json的dev-dependence如下：

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
"dependencies": {
  "axios": "^0.21.0",
  "element-ui": "^2.15.6",
  "vue": "^2.5.16",
  "vue-electron": "^1.0.6",
  "vue-router": "^3.0.1",
  "vuex": "^3.0.1",
  "vuex-electron": "^1.0.0"
},
"devDependencies": {
  "ajv": "^6.5.0",
  "babel-core": "^6.26.3",
  "babel-eslint": "^8.2.3",
  "babel-loader": "^7.1.4",
  "babel-minify-webpack-plugin": "^0.3.1",
  "babel-plugin-istanbul": "^4.1.6",
  "babel-plugin-transform-runtime": "^6.23.0",
  "babel-preset-env": "^1.7.0",
  "babel-preset-stage-0": "^6.24.1",
  "babel-register": "^6.26.0",
  "cfonts": "^2.1.2",
  "chai": "^4.1.2",
  "chalk": "^4.0.0",
  "copy-webpack-plugin": "^4.5.1",
  "cross-env": "^5.1.6",
  "css-loader": "^0.28.11",
  "del": "^3.0.0",
  "devtron": "^1.4.0",
  "electron": "^10.0.1",
  "electron-builder": "^22.2.0",
  "electron-debug": "^3.2.0",
  "electron-devtools-installer": "^3.2.0",
  "element-theme-chalk": "^2.15.6",
  "eslint": "^4.19.1",
  "eslint-config-standard": "^11.0.0",
  "eslint-friendly-formatter": "^4.0.1",
  "eslint-loader": "^2.0.0",
  "eslint-plugin-html": "^4.0.3",
  "eslint-plugin-import": "^2.12.0",
  "eslint-plugin-node": "^6.0.1",
  "eslint-plugin-promise": "^3.8.0",
  "eslint-plugin-standard": "^3.1.0",
  "file-loader": "^1.1.11",
  "html-webpack-plugin": "^3.2.0",
  "inject-loader": "^4.0.1",
  "karma": "^2.0.2",
  "karma-chai": "^0.1.0",
  "karma-coverage": "^1.1.2",
  "karma-electron": "^6.0.0",
  "karma-mocha": "^1.3.0",
  "karma-sourcemap-loader": "^0.3.7",
  "karma-spec-reporter": "^0.0.32",
  "karma-webpack": "^3.0.0",
  "listr": "^0.14.3",
  "mini-css-extract-plugin": "0.4.0",
  "mocha": "^5.2.0",
  "node-loader": "^0.6.0",
  "require-dir": "^1.0.0",
  "sass": "^1.49.9",
  "sass-loader": "^7.0.3",
  "spectron": "^3.8.0",
  "style-loader": "^0.21.0",
  "url-loader": "^1.0.1",
  "vue-html-loader": "^1.2.4",
  "vue-loader": "^15.2.4",
  "vue-style-loader": "^4.1.0",
  "vue-template-compiler": "^2.5.16",
  "webpack": "^4.15.1",
  "webpack-cli": "^3.0.8",
  "webpack-dev-server": "^3.1.4",
  "webpack-hot-middleware": "^2.22.2",
  "webpack-merge": "^4.1.3"
}

输入yarn命令安装即可

安装Element UI和Element-theme相关⁍

yarn⁍

1
2
3
yarn add element-ui --dev
yarn add element-theme-chalk --dev
yarn add element-theme --dev

把element-theme放到最后写，因为它需要gulp-sass–>node-sass依赖，所以安装途中会报错

事实上--dev不加也可以，因为报错的原因，根本存不进package.json

来到熟悉的错误，大致就是

1
2
GULPXXXXXXXXXXX
GULPXXXXXXXXXXX

之类的一长串（不太记得），涉及到说gulp-sass的依赖项node-sass找不到MSbuild环境之类的

重新yarn安装element-theme⁍

思路上来讲就是把gulp-sass依赖的node-sass换成dart-sass，但执行起来又变得奇怪？

  1. 进入node_modules/element-theme文件夹
  2. 删除package.json中gulp-sass依赖
  3. yarn
  4. yarn add gulp-sass --dev

我的本意是在装gulp-sass的过程中再排查问题，或者装到一半修改它的依赖重装；但一点错都没报，直接成功了。。。

解决gracefule-fs错误⁍

在Post not found: Electron-vue开发实战（三）- Render进程开发中提到如下错误：

image-20220227163239063

网上大部分的解决方案是降级node到11.15.0或以下，但我这样做又带来了其他问题（因为element-theme中对node的要求是大于12？）

有一位作者提到了可以升级graceful-fs，故我做如下尝试：

  1. 进入node_modules\element-theme\node_modules\vinyl-fs

  2. 修改package.json中graceful-fs的版本为4.0.0

    image-20220228142938845

  3. 在当前文件夹下yarn

解决chalk错误⁍

执行node_modules/.bin/et -i还是会报错

很抱歉没有截图，但错误提示很明显，说是这一行出错：

image-20220228143540089

根据[2]，需要将chalk降级到4.0.0

  1. 进入文件夹node_modules\element-theme\node_modules\run-sequence
  2. 修改package.json中chalk的版本为4.0.0(怎么都要4.0.0)
  3. yarn

运行et⁍

至此，所有问题应该都解决了，在项目根目录执行

1
node_modules/.bin/et -i

image-20220228144038188

(因为已经生成了，所以是已存在的提示)

项目目录中也终于出现了

image-20220228144154945

本人流下感动的热泪x

img

希望日后编译生成的命令也能有效（先不尝试了）

其他文件修改⁍

.electron-vue\dev-runner.js⁍

取消这一行注释

image-20220228144930749

引入dev-tools⁍

src\main\index.dev.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
/**
 * This file is used specifically and only for development. It installs
 * `electron-debug` & `vue-devtools`. There shouldn't be any need to
 *  modify this file, but it can be used to extend your development
 *  environment.
 */

/* eslint-disable */

// Install `electron-debug` with `devtron`
require('electron-debug')({ showDevTools: true })

const{BrowserWindow}=require("electron")
// Install `vue-devtools`
require('electron').app.on('ready', () => {
  try {
    // await installExtension(VUEJS_DEVTOOLS);
    // 新增的：安装vue-devtools
    const { session } = require("electron");
    const path = require("path");
    session.defaultSession.loadExtension(
      path.resolve(__dirname, "E:/download/devtools-5.1.1/shells/chrome/")  //这个是刚刚build好的插件目录
    ); 
// 这个版本里没有addDevToolsExtension方法了
// BrowserWindow.addDevToolsExtension(path.resolve(__dirname, "../../devTools/chrome")  );
  } catch (e) {
    console.error("Vue Devtools failed to install:", e.toString());
  }

})

// Require `main` process to boot app
require('./index')

创建window时添加开启remote⁍

看到好多人这么做，我尚未搞清楚原理

src\main\index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function createWindow () {
  // 创建窗口
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
  //...

    webPreferences: {
      // 开启node
      nodeIntegration: true,
      contextIsolation: false,
      // 开启remote
      enableRemoteModule: true

    }
  })

tasks错误⁍

yarn run build报错

注释掉 .electron-vue/build.js中相关代码就行了（记得运行时开代理）

image-20220225182906710

build资源下载出错⁍

  1. 开代理
  2. 提前下载好卡住的资源，放在C:\Users\[Username]\AppData\Local\electron-builder\Cache下面[3]

应该就差不多了

总结⁍

在两台设备上装了两次，绕了一点弯路，不过应该是都成功了。

不能保证方法百分百正确，也不知道如何将子依赖的依赖写入父依赖，使得安装可以一键进行。

总之，也算是加深了理解，获得了一些方法论层面的知识。

仅供参考。

  1. Electron+Vue+ElementUI开发环境搭建 - 知乎 (zhihu.com) ↩︎

  2. 最新chalk5.0.0不支持在nodejs中require()导入，解决方法_hh3167253066的博客-CSDN博客 ↩︎

  3. [Electron] electron-builder 打包下载依赖慢/失败 - 简书 (jianshu.com) ↩︎