关于借助Vue框架搭建Electron，有一个现成的解决方案，在这里，可惜的是Vue和Electron的版本有些老旧。
前期准备
全局安装 vue-cli
yarn global add @vue/cli# ornpm install -g @vue/cli
了解Electron的渲染进程与主进程。
新建一个Vue项目
借助 vue-cli 可以很方便的新建一个项目，这里可以借助其可视化工具来新建。
运行
vue ui
关于如何新建项目，这里不表，官方说明请戳这里
我选择的包管理是Yarn，构建工具是babel，使用webpack的童鞋也不必担心，原理相同，只是配置略有差别罢了。
对项目进行初始配置
假设你从来没有build过vue项目，那么现在，先运行：
yarn run build
不出意外的话，脚本会在你的项目目录中创建一个dist文件夹，现在，进到里面打开index.html，你会发现网页一片空白，浏览器报错说资源未找到。
打开index.html的源码，你会发现所有的资源引用都引用到根目录，本地打开则会索引到磁盘根目录下。这就非我们本意了。
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=favicon.ico>
<title>test</title>
<link href=/css/app.css rel=preload as=style>
<link href=/js/app.js rel=preload as=script>
<link href=/js/chunk-vendors.js rel=preload as=script>
<link href=/css/app.css rel=stylesheet>
</head>
<body>
<noscript>
<strong>We're sorry but test doesn't work properly without JavaScript enabled. Please enable it to continue.
</strong>
</noscript>
<div id=app></div>
<script src=/js/chunk-vendors.js> </script>
<script src=/js/app.js> </script>
</body>
</html>
为此，我们需要对项目进行一些简单的配置。
参照Vue官方配置说明，我们在项目根目录下建立一个vue.config.js文件，并在其中写入：
module.exports={
publicPath:'./',
// productionSourceMap:false,
// filenameHashing:false
}
// 后两者可加可不加
现在再次build一下，你应该可以通过生成的index.html文件看到默认的网页了。
引入Electron
运行：
yarn add electron --dev#ornpm install electron --save--dev
完成后，在项目根目录中建立main.js文件，并在其中写入：
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow
const path=require('path');
const url=require('url');
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// and load the index.html of the app.
//mainWindow.loadURL("<http://localhost:8080>");
mainWindow.loadURL(url.format({
pathname:path.join(__dirname,'./dist/index.html'),
protocol:'file:',
slashes:true
}))
// Open the DevTools.
// mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}
// 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', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// 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', function () {
// 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 (mainWindow === null) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
找到mainWindow.loadURL()这里，你能看到我注释了一个localhost的链接。由于我们这里只是简易搭建，就为了找找感觉，所以这里暂时不对开发环境和生产环境进行分别配置。
开发环境模拟
接上文，现在取消对localhost语句的注释，并把下面的url.format()那段语句注释掉，让我们来模拟开发环境吧。
首先，在package.json中的scripts中加上
“electron”:“electron ./main.js”
加上之后的scripts如下所示：
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"electron":"electron ./main.js"
}
这段语句的意思是，让electron从项目根目录下的main.js启动。
现在打开我们的命令行工具，开两个窗口。
第一个窗口输入：
yarn run serve
待到启动完成，在第二个窗口中输入
yarn run electron
不出意外的话，你就能看到弹出了一个窗口，里面就是你的网页。
同时，它还支持热更新，文件修改后就能及时得到反馈。
准备打包
光看显然不行，最终electron应用都是要打包的。
目前流行的electron打包工具有两种：
electron-builderelectron-packager
这里我们选用electron-builder。
运行：
yarn add electron-builder --dev
# or
npm install electron-builder --save--dev
使用electron-builder，需要在package.json中添加如下内容：
{
...
"homepage": ".",
"main": "./main.js",
...
"build": {
"productName": "test",
"appId": "com.richasy.test",
"directories": {
"output": "build"
},
"files": [
"dist/**/*",
"main.js"
],
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": "build/icons/icon.icns"
},
"win": {
"icon": "build/icons/icon.ico"
},
"linux": {
"icon": "build/icons"
}
},
}
图标是可选项，没有就不写
另外build中的productName最好与根层级的name同名，否则也可能出现构建失败的情况。
现在，基本上准备工作就做好了，现在可以开始写构建的脚本了。
在scripts中加入
==“electron-build”:“yarn build & electron-builder –dir”==
完成后的scripts如下：
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"electron":"electron ./main.js",
"electron-build":"yarn build & electron-builder --dir"
}
这段脚本的意思就是先将当前网页打包输出到 dist 文件夹中，再通过electron-builder对其进行打包，打包完成之后，会输出到当前项目目录下的build文件夹中 （此时生成的是一个文件夹，而不是安装包） 。
现在，打开终端，运行一下吧：
yarn electron-build
不出意外的话，打包会成功，然后进入到项目目录/build/win-unpacked，找到你的项目名.exe，双击运行，不报错就万事大吉了。
想打成安装包的话，修改脚本如下（针对自己的目标平台进行修改）：
{
...
"electron-build":"yarn build & electron-builder --win --x64"
}
关于搭建Vue和Electron的简易混合开发环境的流程到这里就介绍完了。我折腾了一下午，踩了不少坑，但文中少有体现。有鉴于此，我觉得有必要把我的搭建过程写出来，让有相同需求的人少走弯路。
