目录
前言
本文章记录写者使用electron-vue
从安装到打包各个环境遇到的问题及解决方案,将会持续更新。
1、安装
由于electron-vue
要安装electron
等一些国外资源文件,所以下载巨慢、巨慢,所以这个时候就要将npm
的下载源更换成国内的镜像,推荐淘宝镜像,代码如下
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
yarn
配置类似与上文的,如下
yarn config set registry https://registry.npm.taobao.org
yarn config set disturl https://npm.taobao.org/dist
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/
2、更换electron版本
由于electron-vue
所带的electron
版本实在是太低了,于是乎就换了一个electron
版本,如下
// 先卸载自带版本
npm uninstall electron
由于写者在使用electron10.x
以上版本,运行时就会提示Cannot read property 'app' of undefined
,于是尝试使用electron9.4.3
,问题虽然解决了,但是不知道为什么出现,等之后探索完善。
// 安装指定版本
npm install electron@9.4.3
3、错误提示: ReferenceError: process is not defined
这里笔者找到两种的解决方法。
-
第一种
-
先找到
index.ejs
,路径为src/index.ejs
-
找到如下代码
<div id="app"></div> <!-- Set `__static` path to static files in production --> <% if (!process.browser) { %> <script> if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\') </script> <% } %>
-
将
process.browser
部分更改成require(process).browser
,如下<% if (!require(process).browser) { %>
-
-
第二种
-
找到
webpack.renderer.config.js
和webpack.web.config.js
,都位于根目录.electron-vue
下 -
均找到如下部分
new HtmlWebpackPlugin({ filename: 'index.html', template: path.resolve(__dirname, '../src/index.ejs') // 其他部分可能不同 })
-
添加如下代码,这里是两个文件都要添加
new HtmlWebpackPlugin({ filename: 'index.html', template: path.resolve(__dirname, '../src/index.ejs'), templateParameters(compilation, assets, options) { return { compilation: compilation, webpack: compilation.getStats().toJson(), webpackConfig: compilation.options, htmlWebpackPlugin: { files: assets, options: options }, process } } })
-
4、错误提示:Cannot read property ‘app’ of undefined
这里上文也提及了,更换一下版本就ok了。
// 先卸载自带版本
npm uninstall electron
// 安装指定版本
npm install electron@9.4.3
5、引入Element-ui
首先按照element
官网的安装、配置步骤来,官方文档
- 下载
element-ui
npm i element-ui -S
- 在
src/renderer/main.js
添加如下代码
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
- 找到
.electron-vue/webpack.renderer.config.js
,找到如下代码
let whiteListedModules = ['vue']
修改成
let whiteListedModules = ['vue', 'element-ui']
就可以使用element-ui
了。