electron-vue各种问题汇总

前言

本文章记录写者使用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了。

6、未完待续。。。