Vue2项目-Elctron构建桌面应用程序

一、创建vue项目

1、安装vue-cli

npm i -g @vue/cli

#OR

yarn global add @vue/cli

2、创建vue项目(vue2)

        注：electron打包vue项目，路由模式不能使用history，修改为hash即可

vue create project_name

3、创建完成后启动项目

cd project_name && npm run serve

二、electron配置

1、vue项目中安装electron

npm install electron

2、添加electron-builder打包工具

vue add electron-builder

// ① 执行完成后src目录会生成background.js
// ② package.json文件script配置项中会新增
    "electron:build": "vue-cli-service electron:build",    //electron打包
    "electron:serve": "vue-cli-service electron:serve",    //electron启动
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"

3、background.js配置

        注：单页面应用无需添加sonPage相关配置

"use strict";

// ----------------------------------<<插件引入>>----------------------------------
import { app, protocol, BrowserWindow, ipcMain } from "electron";
import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
const isDevelopment = process.env.NODE_ENV !== "production";

protocol.registerSchemesAsPrivileged([
  { scheme: "app", privileges: { secure: true, standard: true } },
]);

// ---------------------------------<<主程序窗口>>---------------------------------
// 首页
let home = null;
// ---------------------------------<<自定义窗口>>---------------------------------
// 其他窗口
let sonPage= null;


// ---------------------------------<<主进程配置>>---------------------------------
// 创建首页
function createIndex() {
  home = new BrowserWindow({
    fullscreen: true, //是否全屏
    frame: false, //是否创建无边框窗口
    show: false, //是否显示窗口
    center: true, //是否居中显示
    resizable: false, //禁止改变窗口大小
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true,
    },
  });

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    home.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
    if (!process.env.IS_TEST) home.webContents.openDevTools(); //浏览器开发者工具
  } else {
    createProtocol("app");
    home.loadURL("app://./index.html");
  }

  // 内容加载完成后，显示窗口
  home.once("ready-to-show", () => {
    home.show();
  });
}

// -------------------------------<<自定义窗口配置>>-------------------------------
// 创建其他窗口
function createSonPage() {
  sonPage= new BrowserWindow({
    parent: home, //父级窗口，父级窗口关闭，所有子级窗口也会被关闭
    frame: false,    //是否创建无边框窗口
    show: false,    //是否显示窗口
    center: true,    //居中显示
    transparent: true, //窗口透明
    fullscreen: true, //是否全屏
    resizable: false, //禁止改变窗口大小
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true,
    },
  });

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    sonPage.loadURL(process.env.WEBPACK_DEV_SERVER_URL + "sonPage.html");
    if (!process.env.IS_TEST) sonPage.webContents.openDevTools(); //浏览器开发者工具
  } else {
    sonPage.loadURL("app://./sonPage.html");
  }

  //内容加载完成后，显示窗口
  sonPage.once("ready-to-show", () => {
    sonPage.show();
  });
}


// ----------------------------------<<打开窗口>>---------------------------------
// 监听首页窗口打开请求
ipcMain.on("openIndex", function () {
  createIndex();
});

// 监听宽开侦收窗口打开请求
ipcMain.on("openSonPage", function () {
  createSonPage();
});


// ----------------------------------<<关闭窗口>>---------------------------------
// 监听主程序窗口关闭请求
ipcMain.on("closeIndex", function () {
  home.close();
});

// 监听子程序窗口关闭请求
ipcMain.on("closeSonPage", function () {
  sonPage.close();
});


// ----------------------------------<<进程配置>>---------------------------------
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) createMainWindow();
});

app.on("ready", () => {
  createIndex();
});

if (isDevelopment) {
  if (process.platform === "win32") {
    process.on("message", (data) => {
      if (data === "graceful-exit") {
        app.quit();
      }
    });
  } else {
    process.on("SIGTERM", () => {
      app.quit();
    });
  }
}

4、vue.config.js配置

module.exports = {
  pages: {
    // 主程序
    index: {
      entry: "src/main.js",
      template: "public/index.html",
      filename: "index.html",
      title: "主程序",
      chunks: ["chunk-vendors", "chunk-common", "index"],
    },

    // 子程序
    sonPage:{
      entry: "src/pages/sonPage/main.js",
      template: "public/sonPage.html",
      filename: "sonPage.html",
      title: "子程序",
    }
  },

  pluginOptions: {
    electronBuilder: {
      customFileProtocol: "./",
      nodeIntegration: true,
      builderOptions: {
        appId: "appId",
        asar: "false",
        productName: "productName", // 项目名，也是生成的安装文件名，即productName.exe
        copyright: "Copyright © 2020", // 版权信息
        directories: {
          output: "./build", // 输出文件路径
        },
        win: {
          icon: "./public/favicon.ico",  // 应用icon
          target: [
            {
              target: "nsis",   // 利用nsis制作安装程序
              arch: [
                "ia32", // 32位
                "x64", // 64位
              ],
            },
          ],
        },
        // mac: {    // mac系统
        //   target: ["dmg", "zip"],
        // },
        // linux: {    // linux系统
        //   icon: "./public/favicon.ico",
        // },
        nsis: {
          oneClick: false, // 是否一键安装
          allowElevation: true, // 允许请求提升，为false，用户需提升权限重新启动安装程序
          allowToChangeInstallationDirectory: true, // 允许修改安装目录
          installerIcon: "./public/favicon.ico", // 安装图标
          uninstallerIcon: "./public/favicon.ico", //卸载图标
          installerHeaderIcon: "./public/favicon.ico", // 安装时头部图标
          createDesktopShortcut: true, // 创建桌面图标
          createStartMenuShortcut: true, // 创建开始菜单图标
          shortcutName: "demo", // 图标名称
        },
      },
    },
  },
};

5、创建sonPage组件

（1）创建目录

        ① src目录下创建pages目录
        ② pages目录下创建sonPage目录

（2）创建文件

        ① 创建main.js文件

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUI);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#sonPage')

        ② 创建router.js

             注意：router的mode一定要修改为hash，不能使用history

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/sonPage.html/',
    component: () => import('./views/Home.vue')
  },
]

const router = new VueRouter({
  mode: 'hash',
  routes
})

export default router

        ③ 创建state.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {}
})

        ④ 创建App.vue

<template>
  <div id="sonPage">
    <router-view />
  </div>
</template>

<style lang="less">
</style>

        ⑤ 创建views/home.vue

<template>
  <div class="home"></div>
</template>

<script>

export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped></style>

6、public目录添加sonPage.html文件

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
</head>

<body>
  <div id="sonPage"></div>
</body>

</html>

7、打开 & 关闭窗口

<template>
  <div class="closeBtnRoot">
    // 关闭窗口
    <div title="关闭" class="el-icon-close" @click="closeWindow"></div>

    // 打开窗口
    <div title="打开" class="el-icon-plus" @click="openWindow"></div>
  </div>
</template>

<script>
const { ipcRenderer } = window.require("electron");

export default {
  name: "",
  props: {
  },
  data() {
    return {};
  },
  methods: {
    // 关闭窗口
    closeWindow() {
      // 关闭子程序窗口
      ipcRenderer.send("closeSonPage");
      // 关闭主程序窗口
      ipcRenderer.send("closeIndex");
    },

    // 打开窗口
    openWindow() {
      // 打开子程序窗口
      ipcRenderer.send("openSonPage");
      // 打开主程序窗口
      ipcRenderer.send("openIndex");
    }
  },
};
</script>

<style scoped></style>

        注：打开新窗口，按照子程序窗口配置添加即可，命名不能重复

8、运行 & 打包

        注：window.require("electron")，引入electron后，浏览器无法访问项目，可以添加兼容判断，让浏览器也可以访问

npm run electron:serve // 运行
npm run electron:build // 打包

三、离线打包环境配置

1、下载离线打包文件

        （1）electron下载

                1）下载地址

① 淘宝

地址：https://registry.npmmirror.com/binary.html?path=electron/

② github

地址：https://github.com/electron/electron/releases/download/v13.0.0/

包名：electron-v13.0.0-win32-ia32.zip  // 32位

           electron-v13.0.0-win32-x64.zip   // 64位

注：请根据安装的electron版本下载对应版本

                2）放置位置

                        C:\Users\username\AppData\Local\electron\Cache

                        注：文件不需要解压

        （2）nsis下载

                1）下载地址

nsis

① nsis官网

地址：https://nsis.sourceforge.io/Download

② nsis—github

地址：https://github.com/electron-userland/electron-builder-binaries/releases/download/

包名：nsis-3.0.4.1/nsis-3.0.4.1.7z

nsis-resources

地址：https://github.com/electron-userland/electron-builder-binaries/releases/download/

包名：nsis-resources-3.4.1/nsis-resources-3.4.1.7z

                        

                2）放置位置

                        C:\Users\username\AppData\Local\electron-builder\Cache\nsis

                        注：文件需要解压，如果electron-builder\Cache\nsis目录不存在，手动创建即可

        （3）winCodeSign下载

                1）下载地址

地址：https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z

包名：winCodeSign-2.6.0/winCodeSign-2.6.0.7z

                2）放置位置

                        C:\Users\username\AppData\Local\electron-builder\Cache

                        注：文件需要解压，如果electron-builder\Cache目录不存在，手动创建即可