共计 5450 个字符，预计需要花费 14 分钟才能阅读完成。
前言
本文介绍一种应用 vue-cli-plugin-electron-builder(名字太长，以下简称builder)，将现有的 Vue 单页我的项目迁徙到 Electron 的做法。
上面将会以驰名的 Vue Element Admin 为例，具体讲述如何把它变成一个 双端我的项目。
选型
说到 Vue 迁徙到 Electron，网上许多材料都是介绍如何应用 electron-vue，但通过 比照与实际，我抉择应用builder，起因如下：
- builder的更新保护更及时，而且 issues 更少，相比之下，electron-vue 的更新根本停滞了，问题也更多
- electron-vue 应用的 electron 版本很旧，而 builder 应用的 electron 跟得上官网的步调
- electron-vue 用的是 2.0.4 的 electron：
- builder的 electron 版本当初是 11.2.1:
- electron-vue 是一套基于 vue-cli2 的我的项目模版，而 builder 是基于 vue-cli3 的脚手架插件
我的项目实际也证实这个抉择比拟理智 ^_^
迁徙步骤
进入正题
首先当然是找到你的 Vue 我的项目，本文以 Vue Element Admin 为例，OK，让咱们先下载这个我的项目：
git clone https://github.com/PanJiaChen/vue-element-admin.git第二步，装置依赖：
cd vue-element-admin
npm i跑起来看看：
npm run dev前两步走完，咱们就有了个棒棒的 Vue 我的项目：
第三步，装置 electron 我的项目所需的依赖：
不多，根本的就 4 个：
npm i -D electron@^9.0.0
npm i -D electron-devtools-installer@^3.1.0
npm i -D electron-icon-builder@^2.0.1
npm i -D vue-cli-plugin-electron-builder@~2.0.0-rc.5装置依赖的时候可能会遇到两类问题：
- electron 装置非常迟缓，甚至装不上
- 证书谬误
第一类问题能够通过设置镜像来解决：
npm config set registry https://registry.npm.taobao.org/
npm set electron_mirror https://npm.taobao.org/mirrors/electron/
npm set ELECTRON_MIRROR https://cdn.npm.taobao.org/dist/electron/证书谬误多见于在公司装置时产生，与公司应用的代理无关，能够通过如下办法解决：
npm config set strict-ssl false
// 留神，把 https 都变成 http：npm config set registry http://registry.npm.taobao.org/
npm set electron_mirror http://npm.taobao.org/mirrors/electron/
npm set ELECTRON_MIRROR http://cdn.npm.taobao.org/dist/electron/第四步，划分主过程与渲染过程
如果你应用 vue-cli-plugin-electron-builder 来创立我的项目，它默认是将主过程的源文件设置为 background.js，与渲染过程的文件同放在 src 目录下。
我还是更喜爱 electron-webpack 的做法：在 src 下分出两个目录：main 和 renderer。main 搁置主过程相干的代码，而 renderer 搁置渲染过程相干的代码。electron-vue 也是这么做的。
OK，咱们也在 src 下分出两个目录：main和 renderer，而后 将原来 src 下的模块都放进 renderer 中。
在 main 中创立 index.js(主过程代码)，填入如下代码：
import {app, protocol, BrowserWindow} 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: {<% if (spectronSupport) { %>
// Required for Spectron testing
enableRemoteModule: true,
<% } %>
// 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
}
})
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')
}
}
// 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())
}
}
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()
})
}
}第五步，配置 vue.config.js:
留神 pluginOptions.electronBuilder.mainProcessFile 和 configureWebpack 中的 config.entry.app，配置的详情可见：builder 和 cli，还要特地留神对 svg 的解决。
module.exports = {
pluginOptions: {
electronBuilder: {
mainProcessFile: 'src/main/index.js',
builderOptions: {
appId: "catpoint.com",
productName: "Catpoint",
icon: "./public/icons/icon.ico",
files: ["**/*", "static/*"],
asar: true,
mac: {
icon: "./public/icon.png",
target: ["zip", "dmg"],
category: "com.catpoint-category.utilities"
},
win: {
icon: "./public/icons/icon.ico",
target: ["zip", "nsis"]
},
nsis: {
oneClick: false,
allowElevation: true,
allowToChangeInstallationDirectory: true,
installerIcon: "./public/icons/icon.ico",
uninstallerIcon: "./public/icons/icon.ico",
installerHeaderIcon: "./public/icons/icon.ico",
createDesktopShortcut: true,
createStartMenuShortcut: true,
license: "./LICENSE.txt"
}
}
}
},
...
configureWebpack: config => {
config.entry.app = './src/renderer/main.js'
return {
name: name,
resolve: {
alias: {'@': resolve('src/renderer')
}
}
}
},
...
chainWebpack(config) {
config.module
.rule('svg')
.exclude.add(resolve('src/renderer/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/renderer/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({symbolId: 'icon-[name]'
})
.end()}
}第六步，配置脚本命令：
"scripts": {
"dev:desktop": "npm run copy && vue-cli-service electron:serve --mode dev",
"dev:web": "vue-cli-service serve",
"build:desktop": "npm run build:icon && npm run build:mac && npm run build:win",
"build:win": "vue-cli-service electron:build --legacy --windows --x64",
"build:mac": "vue-cli-service electron:build --legacy --macos",
"build:icon": "electron-icon-builder --input=./public/icon.png --output=public --flatten",
"build:web": "vue-cli-service build",
...
},好了，到这里就实现了迁徙，并且反对双端的调试和打包，顺利的话，半个小时就好了。运行 npm run dev:desktop 和 npm run dev:web 看看成果吧。
您也能够看看这个：Proton Admin，一个在 Vue Element Admin 根底上改建而来的 Electron 我的项目，在继续改良和加强中。
正文完
