electron+vue项目添加vue-devTools - 简书0.nvm use 16.13.1,可以考虑 使用最新版本的node
1.npm install @vue/cli -g
2.vue create electron-vue-demo 创建vue 项目
3.
3.cd electron-vue-demo
4.vue add electron-builder
5.修改主进程代码，修改后代码如下：隐藏菜单栏和更改图标
'use strict'
import { app, protocol, BrowserWindow, Menu, globalShortcut, session } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
{ scheme: 'app', privileges: { secure: true, standard: true } }
])
async function createWindow () {
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
webSecurity: false,
// Use pluginOptions.nodeIntegration, leave this alone
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
},
//这里的${__static}对应的是public目录
icon: `${__static}/favicon.ico`
})
globalShortcut.register('CommandOrControl+F12', function () {
win.webContents.openDevTools()
})
createMenu()
if (process.env.WEBPACK_DEV_SERVER_URL) {
// Load the url of the dev server if in development mode
await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
if (!process.env.IS_TEST) win.webContents.openDevTools()
} else {
createProtocol('app')
// Load the index.html when not in development
win.loadURL('app://./index.html')
}
}
function createMenu() {
// darwin表示macOS，针对macOS的设置
if (process.platform === 'darwin') {
const template = [
{
label: 'App Demo',
submenu: [
{
role: 'about'
},
{
role: 'quit'
}
]
}
]
let menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
} else {
// windows及linux系统
Menu.setApplicationMenu(null)
}
}
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
// try {
// await installExtension(VUEJS_DEVTOOLS)
// } catch (e) {
// console.error('Vue Devtools failed to install:', e.toString())
// }
// Install Vue Devtools
try {
const path = require("path");
session.defaultSession.loadExtension(
path.resolve(__dirname, "./devTools/chrome") //这个是刚刚build好的插件目录
);
} catch (e) {
console.error("Vue Devtools failed to install:", e.toString());
}
}
createWindow()
})
// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
if (process.platform === 'win32') {
process.on('message', (data) => {
if (data === 'graceful-exit') {
app.quit()
}
})
} else {
process.on('SIGTERM', () => {
app.quit()
})
}
}
6.打包-这个可能会遇见不同的问题，比较麻烦。npm run electron:build 执行命令后可以参考下面的这个文章。
7.参考文章：
手把手教你使用Electron5+vue-cli3开发跨平台桌面应用 - 掘金Electron是一个基于Chromium和 Node.js，可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架，兼容 Mac、Windows 和 Linux。虽然B/S是目前开发的主流，但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制，网页应用无法…https://juejin.cn/post/6844903878429769742#heading-348.安装Vue调试神器vue-devtools安装，参考：
Vue调试神器vue-devtools安装 - 简书前言vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。 ch...https://www.jianshu.com/p/63f09651724c该扩展程序未列在 Chrome 网上应用店中，并可能是在您不知情的情况下添加的解决办法 - 知乎1.将下载的文件解压，得到.crx和其它几个文件 2.将该文件后缀改成rar 3.然后再次解压这个rar文件 就会得到很多个js、html等文件，其实你已经成功了，这样； 其实本来crx是一个文件添加不能用，但是转成rar在解压就…https://zhuanlan.zhihu.com/p/106343392