vue+electron 配合使用

创建vue项目

安装vue_cli 3.x 手脚架

• npm install -g @vue/cli

打开可视化界面创建vue项目

• vue ui

安装Electron

• npm install 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"
}