1分钟 electron + vite 快速开发&打包

两种方案( 脚手架均为 vite)

• 直接框架
• 手动配置

框架

electron+vite框架

手动

1. 正常使用 yarn create vite 创建项目 正常开发
2. 配置 electron

   1. 安装 electron yarn add electron --save-dev

      1. 如果安装不上的话 npm config edit
      2. 在空白处粘贴 下面两行

      electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
      electron_mirror=https://cdn.npmmirror.com/binaries/electron/
      

   2. 在根目录下新建 main.js (这里采用的是 ESM)

      import { app, BrowserWindow } from "electron";
      
      function createWindow() {
        const mainWindow = new BrowserWindow({
          width: 1100,
          height: 900,
          webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
          },
        });
      
        mainWindow.setMenuBarVisibility(false); // 隐藏顶部的菜单栏
      
        mainWindow.loadURL("http://localhost:5173/"); // Vite 开发服务器的地址
        mainWindow.loadFile("dist/index.html"); // 打包后的dist
        mainWindow.webContents.openDevTools(); // f12 控制台
      }
      
      app.whenReady().then(createWindow);
      
      app.on("window-all-closed", () => {
        if (process.platform !== "darwin") {
          app.quit();
        }
      });
      
      app.on("activate", () => {
        if (BrowserWindow.getAllWindows().length === 0) {
          createWindow();
        }
      });
      

      3. 修改 vite.config.js

      export default defineConfig({
        plugins: [vue()],
        base: "./",
        build: {
          outDir: "dist", // 输出目录
          rollupOptions: {
            input: {
              main: path.resolve(__dirname, "index.html"),
            },
          },
        },
      });
      

      4. 修改 package.json

      "scripts": { 
          "dev": "vite", 
          "build": "vite build", 
          "preview": "vite preview", 
          "electron": "electron .", // 新增启动 
          "package": "electron-builder" // 打包 下面详细讲解 
      },
      "build": { 
          "appId": "com.yourname.yourapp", 
          "files": [ "dist/**/*", "main.js" ], 
          "directories": { 
              "output": "release" 
          } 
      }
      

      5. 启动
         1. 先启动 项目 yarn dev
         2. 再启动 electron yarn electron
      6. 打包
         1. 安装 electron-builder
         2. 保证 electron 和 electron-builder 都在 devDependencies 内

         "devDependencies": {
             "electron-builder": "^24.13.3",
             "@arco-design/web-vue": "^2.56.0",
             "@vitejs/plugin-vue": "^5.0.5",
             "electron": "^31.3.1",
             "vite": "^5.3.4"
           },
         

         3. 用管理员身份打开终端运行 yarn build 再运行 yarn package
         4. 打包后的文件就在根目录的 release 文件夹内