Electron-React-Vite项目打包后启动报错求助

问题背景 #

基于electron-vite-react模板开发客户端，因未学习TypeScript在.tsx文件中添加//@ts-nocheck屏蔽TS提示。开发环境通过mainWindow.loadURL('http://localhost:5173/app/landing')加载正常，但执行npm run build打包后，启动dist目录下的应用时出现以下错误：

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of 'text/plain'

已尝试修改index.html脚本路径为main.js、更改文件后缀为.mjs、在vite.config.ts添加mimeTypes配置等方法，均未解决问题。

排查与解决步骤 #

1. 修正主进程加载逻辑 #

开发环境用HTTP加载本地dev server，但打包后需加载本地静态文件，检查主进程文件（通常为src/main/index.ts）的加载代码：

• 替换loadURL为loadFile，并确保路径指向打包后的index.html，示例：

  const path = require('path')
  // 打包后的加载逻辑
  mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'))
  

  注意：electron-vite-react模板打包后，渲染进程文件默认在dist/renderer目录下，需根据实际打包结构调整路径。

2. 配置Vite相对路径 #

vite.config.ts中的base配置错误会导致资源路径异常，进而引发MIME类型识别问题：

• 将base设置为相对路径./，确保打包后资源路径正确：

  export default defineConfig({
    // 其他配置...
    base: './',
    build: {
      // 其他build配置...
    }
  })
  

3. 保留Vite自动生成的脚本引入 #

不要手动修改index.html中的脚本路径或后缀，Vite会自动生成符合模块规范的脚本标签，示例：

<script type="module" src="./assets/index.[hash].js"></script>

手动修改路径易导致Electron无法正确识别模块类型，触发MIME错误。

4. 清理缓存后重新打包 #

旧打包缓存可能引发异常，执行以下命令清理后重新构建：

rm -rf node_modules/.cache
rm -rf dist
npm run build

5. 排查语法错误影响 #

虽然//@ts-nocheck屏蔽了TS检查，但文件中的语法错误仍可能导致打包后的JS文件异常：

• 暂时移除部分文件的//@ts-nocheck，检查是否存在语法错误，确保打包过程无报错。

6. 检查Electron窗口配置 #

主进程创建窗口时的webPreferences配置可能影响模块加载：

• 确保nodeIntegration和contextIsolation配置合理，示例：

  const mainWindow = new BrowserWindow({
    // 窗口配置...
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
      // 若需开启contextIsolation，需正确配置preload脚本
    }
  })
  

总结 #

优先排查主进程加载方式（loadFile替代loadURL）和Vite的base路径配置，这是此类问题的常见诱因。若以上步骤无效，可检查dist目录结构，确认index.html与对应JS文件的路径匹配，以及JS文件是否被正确编译为模块格式。

内容的提问来源于stack exchange，提问作者CoderButBeginner