创建vue项目
安装vue_cli 3.x 手脚架
打开可视化界面创建vue项目
安装Electron
创建主程序入口（main.js）
const {app, BrowserWindow} =require('electron');//引入electron
let win;
let windowConfig = {
width:800,
height:600
};//窗口配置程序运行窗口的大小
function createWindow(){
win = new BrowserWindow(windowConfig);//创建一个窗口
win.loadURL(`file://${__dirname}/index.html`);//在窗口内要展示的内容index.html 就是打包生成的index.html
win.webContents.openDevTools(); //开启调试工具
win.on('close',() => {
//回收BrowserWindow对象
win = null;
});
win.on('resize',() => {
win.reload();
})
}
app.on('ready',createWindow);
app.on('window-all-closed',() => {
app.quit();
});
app.on('activate',() => {
if(win == null){
createWindow();
}
});
修改package.json 文件
{
"name": "vue_electron",
"description": "测试",
"version": "1.0.0",
"private": true,
"main": "main.js",
"description":"测试",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"pack": "electron-builder --dir",
"dist": "electron .",
"postinstall": "electron-builder install-app-deps"
},
"build": {
"electronVersion": "1.8.4",
"win": {
"requestedExecutionLevel": "highestAvailable",
"target": [
{
"target": "nsis",
"arch": [
"x64"
]
}
]
},
"appId": "测试",
"artifactName": "demo-${version}-${arch}.${ext}",
"nsis": {
"artifactName": "demo-${version}-${arch}.${ext}"
}
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
运行 Electron 开发、调试
npm run dist
分包生成 .exe 文件
npm run pack
如果打开发现空白可能需要调整下配置
- 根目录下新建一个 vue.config.js 文件 并复制下面内容即可
module.exports = {
publicPath: "./"
};
- 如果还不行，可以看看你项目是不是选择history路由模式，打开路由的配置文件（index.js）需要注释mode这一行
const router = new VueRouter({
// mode: "history",
base: process.env.BASE_URL,
routes
});
文章到此结束，如有疑问可以私信，想单独创建Electron 应用 或 在electron调试时实现编写代码热更新
点击跳转
注意：默认生成的vue项目会默认生成 dependencies 这一项配置，需要删除，否则打包Electron 会报错
"dependencies": {
"core-js": "^3.6.5",
"electron": "^13.1.2",
"electron-builder": "^22.11.7",
"electron-forge": "^5.2.4",
"vue": "^2.6.11"
}
