返回

Electron JS 和 Vue 路由打包与 Electron Builder 不兼容怎么办？

vue.js

Electron JS 和 Vue 路由打包与 Electron Builder 不兼容：终极指南

问题：打包失败

当你尝试使用 Electron Builder 打包一个使用 Electron JS 和 Vue 3 Composition API 创建的 Electron 应用程序时，可能会遇到一个问题：打包后的应用程序仅显示一个白屏。

原因：不兼容

此问题是由 Electron Builder 与 Electron JS 和 Vue 路由中使用的打包方法之间的不兼容造成的。

解决方案

要解决此问题，请按照以下步骤操作：

  1. 启用 webSecurity： 在 main.js 中，启用 webSecurity：
webPreferences: {
  preload: path.join(__dirname, 'preload.js'),
  nodeIntegration: true,
  contextIsolation: false,
  webSecurity: false
}
  1. 将 Electron 应用程序设置为 HTTPS： 将 loadURL 替换为：
mainWindow.loadURL(`https://localhost:3000/`);
  1. 调整 Vue 路由模式： 将 Vue 路由模式从哈希模式更改为 history 模式：
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [...
  1. 将文件添加到 Electron Builder 构建中： 在 package.json 的 build 对象中，将 files 数组添加到 mac 对象中：
"build": {
  "appId": "com.myapp.app",
  "mac": {
    "target": "dmg",
    "icon": "...",
    "files": [
      "dist/*"
    ]
  },
}

其他提示

  • 确保已正确配置 Electron Builder。
  • 检查是否存在任何其他错误或警告。
  • 尝试使用不同的 Electron 版本。
  • 在 Electron 开发人员工具中查看控制台输出，以获取有关错误的详细信息。

常见问题解答

  1. 为什么需要启用 webSecurity？
    它可以防止 Electron 从不受信任的域加载外部资源。

  2. 为什么需要将 Electron 应用程序设置为 HTTPS？
    HTTPS 可以防止中间人攻击。

  3. 为什么需要更改 Vue 路由模式？
    Electron Builder 不支持哈希模式路由。

  4. 为什么需要将文件添加到 Electron Builder 构建中？
    它确保在打包应用程序时包含所有必需的文件。

  5. 如果我仍然遇到问题怎么办？
    请在 Electron JS 或 Vue 论坛上寻求帮助。