electron- Vue 安装踩坑

Posted by luoruiqing on June 4, 2020

想要浅尝electron, 正好自身有Vue的基础, 不料安装过程不忍回首, 按照官方文档安装clone

1
2
3
4
5
6
7
8
# 安装 vue-cli 和 脚手架样板代码
npm install -g vue-cli
vue init simulatedgreg/electron- Vue my-project

# 安装依赖并运行你的程序
cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev

执行启动后发现直接报错 process is not defined

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
ERROR in Template execution failed: ReferenceError: process is not defined

  ERROR in   ReferenceError: process is not defined

    - index.ejs:11 eval
      [.]/[_html-webpack-plugin@3.2.0@html-webpack-plugin]/lib/loader.js!./src/index.ejs:11:2

    - index.ejs:16 module.exports
      [.]/[_html-webpack-plugin@3.2.0@html-webpack-plugin]/lib/loader.js!./src/index.ejs:16:3

    - index.js:284
      [my-project]/[_html-webpack-plugin@3.2.0@html-webpack-plugin]/index.js:284:18

    - runMicrotasks

    - task_queues.js:93 processTicksAndRejections
      internal/process/task_queues.js:93:5

搜索后发现解决这个问题的方式千奇百怪, 这里说个最简单的:

按照issues上最新的 https://github.com/SimulatedGREG/electron- Vue/issues/871#issuecomment-564302194 改动方式如下:

1
2
3
<!-- 关键是这行代码 -->
<%  if (!require('process').browser) { %>
<!--  -->

!process.browser 改为 !require('process').browser

重启服务