采用Cursor开发，Electron 打包后界面空白问题排查过程记录

精选原创

盼君帮你做作业 2025-01-04 17:21:01 ©著作权

文章标签 解决方案开发者工具资源加载 文章分类 AI作画 AIGC

©著作权归作者所有：来自51CTO博客作者盼君帮你做作业的原创作品，请联系作者获取转载授权，否则将追究法律责任

采用cursor 开发了一个网站之后，页面调试都运行正常，终于以为大功告成的时候，使用 election 打包，结果界面一片空白显示不出来。

让cursor 自我排查了好几遍，最终都没有解决问题。

最后，我将这个问题问了kimi。

采用Cursor开发，Electron 打包后界面空白问题排查过程记录_开发者工具

下面是kimi 给出的回复。

Electron 打包后界面空白的问题可能由多种原因引起，以下是一些常见的原因及解决方案：

### 路由模式问题
- **原因**：在开发阶段，Electron 项目通常使用 `webpack` 或 `vite` 等脚手架启动本地 HTTP 服务，支持 `history` 路由模式。但打包后，应用不再依赖 HTTP 服务，而是直接加载静态文件，此时 `history` 路由模式可能会导致页面空白。
- **解决方案**：将路由模式从 `history` 改为 `hash`。例如，在 Vue 项目中，使用 `createWebHashHistory` 替代 `createWebHistory`。

### 资源路径问题
- **原因**：打包后，Electron 应用的资源路径可能发生变化，导致无法正确加载资源。
- **解决方案**：确保在主进程中正确设置资源路径。例如，使用 `path.resolve` 来获取资源文件的绝对路径。

### 控制台错误
- **原因**：打包后，应用可能在控制台中隐藏了错误信息，导致无法直接看到问题所在。
- **解决方案**：可以通过快捷键或代码在应用中打开开发者工具，查看控制台输出的错误信息。

### 其他配置问题
- **原因**：可能是 Electron 的配置或打包工具的配置不正确。
- **解决方案**：检查 `package.json` 中的配置，确保使用了正确的打包工具和配置选项。

如果上述方法都无法解决问题，建议逐步排查代码和配置，或者查看打包后的日志文件以获取更多信息。

我又将kimi 的回复给了cursor，最后问题解决了！

好的，这次问题已经解决了。 请帮我遇到的问题，和问题解决方案，整理到  开发过程中遇到的问题.md 文档中，以日期时间 来追加

以下就是 cursor 对于本次修改方案的总结。

2024-03-21 Electron 打包后界面空白问题

问题描述

使用 electron-builder 打包后，运行应用出现空白界面，没有任何内容显示。

问题原因

路由模式不适合 Electron 环境
资源加载路径配置不正确
Electron 安全策略限制

解决方案

修改路由模式（src/router/index.js）：

- import { createRouter, createWebHistory } from 'vue-router'
+ import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history: createWebHashHistory(),
  routes
})

修改 Electron 主进程配置（electron/electron.js）：

function createWindow() {
  const ROOT_PATH = process.env.ELECTRON_RENDERER_URL || app.getAppPath()
  
  const mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js'),
      webSecurity: false
    }
  });

  if (!isDev) {
    const indexPath = path.join(ROOT_PATH, 'dist', 'index.html');
    mainWindow.loadFile(indexPath);
  }
}

配置打包选项（package.json）：

{
  "build": {
    "asar": true,
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "extraResources": [
      {
        "from": "dist",
        "to": "dist"
      }
    ]
  }
}

优化构建配置（vite.config.js）：

export default defineConfig({
  base: './',
  build: {
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            if (id.includes('element-plus')) {
              return 'element-plus';
            } else if (id.includes('vue')) {
              return 'vue-vendor';
            } else {
              return 'vendor';
            }
          }
        }
      }
    },
    outDir: 'dist',
    assetsDir: 'assets'
  }
})