解决electron-vue安装vue-tools失败

前端 , 评论

本文主要解决在electron-vue中安装vue-tools扩展失败如何处理。本次实验的基本框架是clectron-vue-element-admin。

一、找到报错的地方

在开发环境中，为了调试方便，默认在启动的时候安装vue-tools扩展，可在 【src/main/index.dev.js】见到相关的代码。报错的原因是安装vue-tools的扩展的时候去google的扩展网站下载相关的扩展了，由于网络被墙的原因，所以自然下载失败。

1
2
3
4
5
6
let installExtension = require('electron-devtools-installer')
    installExtension.default(installExtension.VUEJS_DEVTOOLS)
        .then(() => {})
        .catch(err => {
        console.log('Unable to install `vue-devtools`: \n', err)
    })

二、electron是如何安装扩展的

1
2
const { BrowserWindow } = require('electron')
BrowserWindow.addExtension('扩展路径')

三、手动下载扩展

通过git clone或者直接下载zip压缩包，将该项目下载到本地并解压。

https://github.com/chenlaogou111/VueDevTools

四、安装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*  不要忘记引入浏览器窗口了 */ 
const { BrowserWindow } = require('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.addExtension('E:\\phpstudy_pro\\WWW\\shidao-DMS\\VueDevTools-master\\chrome')
})