问题

问题1 - 使用 ESM 语法进行写

electron 28.0版本以后支持ESM语法，需要注意的是，有些部分是不兼容的

在electron项目中使用ESM语法步骤:

1. 升级至electron@^28.0.0
2. 简单地在package.json中添加"type": "module"
3. 把所有.js 文件中的require, module.exports 改成 import from , export 语法。这里需要注意的是，渲染线程不支持ESM语法，preload.js需要使用CommonJS语法来写，不然会报错。
4. 注意，esm 的 import语法中，文件后缀名.js不再能省略，必须显式提供。
5. 注意，esm中普通成员要用export { myFunc } 的方式提供。

node.js有些全局变量仍然不能直接,使用修复__filename 和 __dirname缺失问题

import path from 'path';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename)

• 参考文档
• electron 切换至esm
• 官方文档

---

问题2 - 打包

如果是使用npm命令安装的第三方，使用 Electron Forge 进行打包

npm install --save-dev @electron-forge/cli
npx electron-forge import

转换脚本完成后，Forge 会将一些脚本添加到您的 package.json 文件中。

package.json
  //...
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  //...

如果是 pnpm 安装的库，使用 electron-builder 进行打包

在项目的根目录中创建一个.npmrc的文件 内容

# 将pnpm变成扁平化架构
node-linker=hoisted
public-hoist-pattern=*
shamefully-hoist=true

package.json中添加

  "scripts": {
    "dev": "concurrently \"vite\" \"nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue\" ",
    "build": "vite build",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "build": {
    "appId": "your.id.com",
    "directories": {
      "output": "build"  //输出文件
    },
    "mac": {
      "category": "your.app.category.type"
    }
  }

• 参考文档
• electron-builder
• 如何使用pnpm打包electron项目

---

问题3 - 程序打包之后的界面加载问题

Electron项目使用的是vite + vue，在开发过程中可以使用 win.loadURL("http://localhost:5173/") 启动项目，但是打包成exe后，界面加载不出来，需要使用 win.loadFile("index.html") 才能正常加载。

📢 注意，这里的坑 vue 使用 vite 打出来的包，在 index.html 中导入js对象时，使用的是/，但是绝对路径需要是./，所以资源会一直加载失败

• electron-builder打包步骤
  1. 对vue项目进行打包，生成文件夹dist
  2. 对dist文件夹中的index.html引入的js文件路径改为./
  3. 修改electron-builder的输出文件夹路径
  4. electron中的main.js 需要加载 win.loadFile("dist/index.html");

第二步也可以在 vite.config.js 中，设置 base 选项来定义应用的基础路径。这通常用于当你的应用部署在一个子路径下时。

// vite.config.js
export default {
  base: './', // 这会设置应用的基础路径为相对于域名的根目录
  // 其他配置...
};