Electron-vue使用时的注意点

作为一个刚刚接触electron-vue的人来说, 官网极少的指南成了我学习上最大的阻碍🤣,今天开了一个electron-vue的项目, 一堆的报错和奇奇怪怪的bug实在是浪费了不少时间去解决. 下面就做一个整理,增强记忆.

Windows依赖安装失败的问题

这个问题其实在文档中有说明

我报错是因为node-sass的问题。

使用element-ui中的el-table组件时不显示

修改根目录下的.electron-vue中的webpack.renderer.config.js文件

let whiteListedModules = ['vue']

修改为

let whiteListedModules = ['vue', 'element-ui']

运行项目时页面空白,并且命令行报错 Unable to install vue-devtools

先安装vue-devtools
npm install vue-devtools --save-dev

然后修改src/main/index.dev.js为以下内容

// Install `electron-debug` with `devtron`
require('electron-debug')({ showDevTools: true })
import {  BrowserWindow } from 'electron';
// Install `vue-devtools`
require('electron').app.on('ready', () => {
  let installExtension = require('electron-devtools-installer')
  // installExtension.default(installExtension.VUEJS_DEVTOOLS)
  //   .then(() => {})
  //  .catch(err => {
  //     console.log('Unable to install `vue-devtools`: \n', err)
  //   })
  BrowserWindow.addDevToolsExtension('node_modules/vue-devtools/vender')
})

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

参考大佬的解决方法

运行项目后报错: TypeError: Object.fromEntries is not a function

先安装依赖
npm i polyfill-object.fromentries

然后进入.electron-vue/dev-client.js, 在文件中引入依赖

import 'polyfill-object.fromentries';

项目构建时报错: Build issue: SyntaxError: Identifier 'tasks' has already been declared

45行修改为 const _tasks
77行修改为 await _tasks 改个名就行