vue-electron 装配流程

vue-electron 装配流程

现在的一个库叫做 electron-vue 的因为年久失修版本过低，而且也没有讲述装配的方法，只是给了一个项目，导致很多小伙伴用起来很是棘手。
在学习了一些必要的知识后，总结了一下给 vue 或者 react 手动装备 electron 的流程，希望能帮助到大家。

这篇是关于vue 添加 elctron 的流程，比 react还是要稍微麻烦一些。

第一阶段

分别执行!

创建 vue项目， 根据需要手动配置添加 router 等常用组件， 记得使用独立配置文件，不然package.json 太乱了。

vue create hello-world

进入项目目录

yarn add cross-env electron-is-dev

yarn add --dev concurrently electron electron-builder wait-on

第二阶段

在 public 文件夹下面创建一个 electron.js 文件
内容如下

const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require("path");
const isDev = require("electron-is-dev");
let mainWindow;
function createWindow() {
    mainWindow = new BrowserWindow({
      webPreferences: {
            devTools: true,
            nodeIntegration: true,
        },
        width: 900,
        height: 700,
        resizable: false,
     });
    mainWindow.loadURL(isDev ? "http://localhost:3000" : `file://${path.join(__dirname, "../build/index.html")}`);
    mainWindow.on("closed", () => (mainWindow = null));
}
app.on("ready", createWindow);
app.on("window-all-closed", () => {
    if (process.platform !== "darwin") {
        app.quit();
    }
});
app.on("activate", () => {
    if (mainWindow === null) {
        createWindow();
    }
});

根目录下创建文件 vue.config.js 内容如下

// vue.config.js
module.exports = {
    publicPath: "./",
    configureWebpack: {
    devServer: {
      //   disableHostCheck: true,
      //   open: false,
      //   host: 'exmaple.com',
      port: 3000,
      //   https: true,
      //   hotOnly: false,
    },
  },

};

第三阶段

如果使用了 vue-router 需要修改 src/router.js 文件

export default new Router({
    ...
    // 需要注释掉这一行 如果开启 history模式 编译出来是找不到路径的
    // mode: 'history', 
    base: process.env.BASE_URL,
    ...
})

修改 .gitignore 文件 添加下面的内容 避免 build 文件夹被提交

/build
/dist

第四阶段

修改 package.json 文件, 添加以下内容

{
...

"description": "<your project description>",
"author": "<author of app>",
"build": {
    "appId": "<com.your_app>",
    "files": [
      "*.js",
      "build",
      "node_modules",
      "public"
    ]
},
"main": "public/electron.js",
"homepage": "./",

...
}

修改 package.json 中的 script 字段

{
...

  "scripts": {
    "vue-start": "vue-cli-service serve",
    "vue-build": "vue-cli-service build --dest build",
    "vue-lint": "vue-cli-service lint",
    "electron-build": "electron-builder",
    "release": "yarn vue-build && electron-builder --publish=always",
    "build": "yarn vue-build && yarn electron-build",
    "start": "concurrently \"cross-env BROWSER=none yarn vue-start\" \"wait-on http://localhost:3000 && electron .\""
  },

...
}

最后 祝你成功

开发

yarn start

发布

yarn build