VUE项目 Electron打包

开发完vue项目后想打包成桌面应用程序的话，可以使用electron
在项目根目录加两个文件
1、main.js

// 导入模块
const { app, BrowserWindow } = require("electron");
const path = require("path");

// const NODE_ENV = "development"; //开发环境;//process.env.NODE_ENV;
const NODE_ENV = "process.env.NODE_ENV"; //开发环境;//process.env.NODE_ENV;

// 创建主窗口
const createWindow = () => {
    const mainWindow = new BrowserWindow({
        width: 840,
        height: 800,
        center: true, // 窗口居中显示
        transparent: true, // 设置窗口透明
        // frame: true, //是否显示顶部导航，去掉关闭按钮 最大化最小化按钮
        // titleBarStyle: "hidden", //Windows下创建的窗口是否带边框

        frame: false, // 隐藏默认标题栏和边框
        titleBarStyle: "hiddenInset", // MacOS下使用内嵌式无边框样式

        backgroundColor: "#02243B", //窗口背景
        // fullscreen: true, //全屏设置
        // webPreferences: {
        //     preload: path.join(__dirname, "preload.js"),
        //     nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的API
        //     contextIsolation: true, // 可以使用require方法 // 是否在独立 JavaScript 环境中运行
        //     enableRemoteModule: true, // 可以使用remote方法
        //     webSecurity: false, // 它将禁用同源策略 (通常用来测试网站), 如果此选项不是由开发者设置的默认为true
        //     defaultMonospaceFontSize: 16, //页面字体默认为16
        //     minimumFontSize: 12, //页面字体最小为12
        //     //   v8CacheOptions: "bypassHeatCheckAndEagerCompile", //v8CacheOptions 强制 blink 使用 v8 代码缓存策略  除了编译是及时的。 默认策略是 code。
        // },
    });

    //   // 和自己本地vue项目启动的地址保持一致
    //   mainWindow.loadURL("http://localhost:3000");

    //判断是否为开发环境，开发环境需要更换url
    mainWindow.loadURL(
     "http://localhost:8888/index"
    );
    // 设置窗口菜单栏
    mainWindow.setMenu(null);
    //默认最大化
    mainWindow.maximize();
    //打开
    mainWindow.show();

    // 打开开发工具
    // if (NODE_ENV === "development") {
    //   mainWindow.webContents.openDevTools();
    // }
    // mainWindow.webContents.openDevTools();
    //   // 当窗口被关闭时释放资源
    //   mainWindow.on("closed", function () {
    //     mainWindow = null;
    //   });

    // 监听窗口最大化或最小化事件
    mainWindow.on("maximize", function () {
        console.log("窗口已最大化");
    });

    mainWindow.on("unmaximize", function () {
        console.log("窗口已恢复原始大小");
    });

    // 处理窗口移动事件，例如更新托盘图标提示信息
    mainWindow.on("move", function (event) {
        console.log(`窗口已被移动至新位置`);
    });
};

// 应用准备就绪，加载窗口
app.whenReady().then(() => {
    createWindow();

    // mac 上默认保留一个窗口
    app.on("activate", () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow();
    });
});

// 关闭所有窗口 ： 程序退出 ： windows & linux
app.on("window-all-closed", () => {
    if (process.platform !== "darwin") app.quit();
});

2、preload.js 这个是类似浏览器F12的效果，可以不要，我已经在main里注释掉了，想用的话解除main.js里 webPreferences 和打开开发工具那一栏的注释就行

// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener("DOMContentLoaded", () => {
    const replaceText = (selector, text) => {
        const element = document.getElementById(selector);
        if (element) element.innerText = text;
    };

    for (const dependency of ["chrome", "node", "electron"]) {
        replaceText(`${dependency}-version`, process.versions[dependency]);
    }
});

3、安装依赖

//运行electron
npm install electron --save-dev

//打包用的
npm install electron-builder --save-dev

4、package.json文件，这里要引入main.js，还得在scripts加启动和打包命令，再把build设置一下就行了

{
  "name": "public-health1",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "prettier": "prettier --write .",
    "commit": "cz",
    "serve": "vite preview",
    "electron": "electron .",
    "electron:build": "electron-builder",
  },
  "build": {
    "appId": "com.demo.sxsc",
    "productName": "sxsc",
    "copyright": "Copyright © 2024 <xigua.com>",
    "mac": {
      "category": "public.app-category.utilities"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "deleteAppDataOnUninstall": true
    },
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "directories": {
      "buildResources": "assets",
      "output": "dist_electron"
    }
  },
  "dependencies": {
    "@alicloud/dysmsapi20170525": "^2.0.22",
    "@better-scroll/core": "^2.4.2",
    "@vueup/vue-quill": "^1.1.1",
    "@vueuse/core": "^6.7.5",
    "axios": "^0.19.2",
    "better-scroll": "^2.4.2",
    "echarts": "^5.4.2",
    "element-plus": "^2.3.1",
    "js-cookie": "^3.0.1",
    "js-md5": "^0.7.3",
    "jsencrypt": "^3.3.2",
    "lodash": "^4.17.21",
    "qs": "^6.11.1",
    "vexip-ui": "^2.0.0-beta.15",
    "vue": "^3.2.36",
    "vue-router": "^4.0.14",
    "vuex": "^4.0.2"
  },
  "main": "main.js",
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.10.2",
    "@vue/compiler-sfc": "^3.0.4",
    "commitizen": "^4.2.4",
    "cz-conventional-changelog": "^3.3.0",
    "electron": "^33.2.1",
    "electron-builder": "^25.1.8",
    "electron-packager": "^17.1.2",
    "prettier": "^2.6.2",
    "sass": "^1.43.2",
    "typescript": "^4.4.3",
    "unplugin-auto-import": "^0.6.6",
    "unplugin-vue-components": "^0.17.8",
    "vite": "^2.6.4",
    "vite-plugin-html": "^2.1.2",
    "vite-plugin-mock": "^2.9.6",
    "vite-plugin-style-import": "^1.4.1",
    "vite-plugin-windicss": "^1.8.10",
    "windicss": "^3.5.6"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  "eslingConfig": {
    "rules": {
      "vue/no-unused-vars": 0,
      "no-unused-vars": 0
    }
  }
}

6、运行和打包

//运行
npm run electron

//打包
npm run electron:build

7、其他
electron-builder会报错，找不到原因的话就换electron-package打包
配置文件package.json的script里加上"e-package": "electron-packager ."，再安装个依赖就行

//安装依赖
npm install electron-packager --save-dev

//package.json的script里加上
"e-package": "electron-packager ."
//运行打包
npm run e-package