526互联

electron+vite,配置：vite-plugin-electron

发布时间 2023-11-09 20:55:59作者: 郑州谷多软件

1、创建vite项目，安装electron，electron从23开始不支持win7，win8.1所以我用最后一个版本

     pnpm create vite

    pnpm ADD -D electron@22.3.27

   pnpm i vite-plugin-electron -D

2、创建electron的主进程文件

        electron的main.ts和preload.ts

//const { app, BrowserWindow, screen } = require("electron");
import { app, BrowserWindow, screen } from "electron";
//const path = require("path");
import path from "path";
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    x: 0,
    y: 0,
    frame: false, // 隐藏窗口的顶部菜单栏和标题栏
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: true,
      preload: path.join(__dirname, "preload.js"),
    },
    //webPreferences: { preload: path.join(__dirname, "preload.ts") },
  });
  // 获取主屏幕的分辨率
  const screenRect = screen.getPrimaryDisplay().bounds;
  console.log(
    `Screen Width: ${screenRect.width}, Screen Height: ${screenRect.height}`
  );

  // 设置窗口大小和位置
  win.setBounds({
    x: 0,
    y: 0,
    width: screenRect.width,
    height: screenRect.height,
  });
  console.log(process.env.npm_lifecycle_event);
  //   if (process.env.npm_lifecycle_event === "start") {
  //     win.loadURL("http://127.0.0.1:3212");
  //     win.webContents.openDevTools();
  //     //快捷命令shift+ctrl+i
  //   } else {
  //     win.loadFile("dist/index.html");
  //   }

  if (process.env.VITE_DEV_SERVER_URL) {
    win.loadURL(process.env.VITE_DEV_SERVER_URL);
    win.webContents.openDevTools();
  } else {
    win.loadFile(path.join(__dirname, "index.htm"));
  }
  //win.loadURL("http://127.0.0.1:3211");
};
app.whenReady().then(() => {
  createWindow();
  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length == 0) {
      createWindow();
    }
  });
  app.on("window-all-closed", () => {
    if (process.platform !== "darwin") app.quit();
  });
});

3、在vite.config.ts中配置electron的入口文件预编译，生成js文件

   

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import electron from "vite-plugin-electron";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    electron([
      {
        entry: "electron/main.ts",
        // preload: {
        //   // Shortcut of `build.rollupOptions.input`
        //   input: "electron/preload.ts",
        // },
        // // Optional: Use Node.js API in the Renderer process
        // renderer: {},
        vite: { build: { outDir: "dist-electron" } },
      },
      {
        entry: "electron/preload.ts",
        vite: { build: { outDir: "dist-electron" } },
      },
    ]),
  ],
  server: {
    port: 3212,
  },
});

 

 我把它输出到dist-electron文件夹下面，与srl同级

 4、修改package.json，main入口，和防止乱码chcp 65001

由于electron主进程是使用的node环境，而默认情况下，Node.js 使用的是 CommonJS 模块规范，而 import 语句属于 ECMAScript 模块规范，两者不兼容。所以需要使用编译为 CommonJS 规范的dist-electron/main.js作为main属性的入口文件，否则会报es6语法错误。
由于dist-electron文件夹下是打包编译后的CommonJS模块规范的代码，当package.json设置type为module(ECMAScript模块规范)时将会将无法识别 CommonJS 模块规范的语法从而产生报错。此时就可以删除type:module或者将 type 的值设置为"commonjs"即可。因为不设置 type 时 Node.js 会默认使用 CommonJS 模块系统。

chcp 65001 是 Windows 系统下的一个命令，用于将控制台的代码页设置为 UTF-8 编码。在默认情况下，Windows 控制台使用的是 GBK 或者其他本地编码，导致在控制台中输出中文等非 ASCII 字符时可能会出现乱码。 使用 chcp 65001 命令可以将控制台的代码页设置为 UTF-8 编码，以便正确显示中文等非 ASCII 字符。

 5、开发web端与electron分离

    搭建已经搭建好的工程目前只能启动electron桌面端的服务，如果需要启动web端服务的话需要将vite.config.ts中的plugins中的electron插件注释掉。这样非常麻烦，所以并不是我想要的效果。我将会使用不同的脚本命令启动不同服务，并且实现web端、electron端的项目打包。

 

 我还是喜欢使用插件的方式对开发环境跟打包配置

当执行pnpm dev命令时会默认读取vite.config.ts文件中的配置信息启动开发服务，此时由于使用了vite-plugin-electron插件。所以就会启动electron的开发环境。
因此我们需要按照以下步骤新增一个electron服务的config文件与web服务的config文件分开管理。

  1. 使用vite.chonfig.ts文件复制一份名为vite.config.electron.ts的electron专属配置文件。
  2. 删除vite.chonfig.ts中的vite-plugin-electron插件，恢复初始化的样子。
  3. 在package.json文件添加命令"electron:dev": "chcp 65001 && vite --config vite.config.electron.ts"
  4. chcp 65001：解决控制台中文乱码问题。
  5. vite --config vite.config.electron.ts：指定vite运行时的配置文件。

 

{
    "name": "electron_vite",
    "private": true,
    "version": "1.0.0",
    "main": "dist-electron/main.js",
    "type": "commonjs",
    "scripts": {
        "dev": "chcp 65001&&vite",
        "build": "vue-tsc && vite build",
        "preview": "vite preview",
        "electron:dev": "chcp 65001&&vite  --config vite.config.electron.ts"
    },
    "dependencies": {
        "vue": "^3.3.4"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^4.2.3",
        "electron": "v22.3.27",
        "typescript": "^5.0.2",
        "vite": "^4.4.5",
        "vite-plugin-electron": "^0.15.4",
        "vue-tsc": "^1.8.5"
    }
}

 

6、打包
   pnpm i i electron-builder -D
   在package.json添加脚本。
   
  "electron:build": "vue-tsc && vite build --config vite.config.electron.ts && electron-builder"
   在electron/main.ts中配置应用加载路径。

 

//const { app, BrowserWindow, screen } = require("electron");
import { app, BrowserWindow, screen } from "electron";
//const path = require("path");
import path from "path";
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    x: 0,
    y: 0,
    frame: false, // 隐藏窗口的顶部菜单栏和标题栏
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: true,
      preload: path.join(__dirname, "preload.js"),
    },
    //webPreferences: { preload: path.join(__dirname, "preload.ts") },
  });
  // 获取主屏幕的分辨率
  const screenRect = screen.getPrimaryDisplay().bounds;
  console.log(
    `Screen Width: ${screenRect.width}, Screen Height: ${screenRect.height}`
  );

  // 设置窗口大小和位置
  win.setBounds({
    x: 0,
    y: 0,
    width: screenRect.width,
    height: screenRect.height,
  });
  console.log(process.env.npm_lifecycle_event);
  //   if (process.env.npm_lifecycle_event === "start") {
  //     win.loadURL("http://127.0.0.1:3212");
  //     win.webContents.openDevTools();
  //     //快捷命令shift+ctrl+i
  //   } else {
  //     win.loadFile("dist/index.html");
  //   }

  if (process.env.VITE_DEV_SERVER_URL) {
    win.loadURL(process.env.VITE_DEV_SERVER_URL);
    win.webContents.openDevTools();
  } else {
    win.loadFile(path.join(__dirname, "../dist/index.html"));
  }
  //win.loadURL("http://127.0.0.1:3211");
};
app.whenReady().then(() => {
  createWindow();
  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length == 0) {
      createWindow();
    }
  });
  app.on("window-all-closed", () => {
    if (process.platform !== "darwin") app.quit();
  });
});

在根目录新增一个electron-builder.json文件设置electron-builder打包配置，src文件夹同级

/** electron-builder.json */
// 暂时先设置这两个配置防止打包后的应用出现的各种问题。（后面解释为什么需要设置）
{
    "files": ["dist/**/*", "dist-electron/**/*"], // 设置需要打包的文件
    "directories": {
        "output": "release" // 设置出口文件
    }
}

 

 

  • dist：由vite打包后的产物。
  • dist-electron：由vite-plugin-electron插件编译打包后生成的产物(为了将ts文件编译为js文件)。
  • release：由electron-builder将dist跟dist-electron合并打包后生成的产物，其中的文件无需关注，目前我们仅关注.exe文件即可

 

 这样就成功了

 

7、调试
  我们一般调试出现白屏，大部分是路径加载的问题
 

 

 

如果是对electron打包后出现bug不知道如何排查，在解决打包后产生的各类bug之前，需要先安装一个.asar压缩文件的解压工具，使用asar解压工具将electron打包后的app.asar解压后查看，方便快速排查解决部分打包文件路径不对造成的bug。

全局安装asar依赖。

pnpm add -g asar

进入release/win-unpacked/resources文件夹

打开终端执行asar extract app.asar ./命令即可查看打包后的文件目录。

执行后

根据自己的路径查找白屏路径问题

，其他问题可以打开调试工具，快捷方式：shift+Ctrl+i,查看进行调试

主要记住打包i路径，