Electron-Vite开发服务器无法解析别名路径问题求助

项目结构 #

front-end
- apps
  - desktop-app（Electron-vite脚手架创建）
  - webapp（NX脚手架创建）
- packages
  - shift-management（NX创建的React组件库）

问题现象 #

• 执行pnpm run build构建后，生成的exe文件可正常解析别名路径
• 执行pnpm run dev启动开发服务器时，别名路径始终解析失败，报错无法找到模块

现有配置 #

package.json 脚本片段 #

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build && electron-builder",
  "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
  "preview": "vite preview"
},

tsconfig.json 路径配置 #

"baseUrl": ".",
"paths": {
  "@": ["."],
  "@hf-shift-management": ["packages/shift-management/src/index.ts"]
}

vite.config.ts 别名配置 #

resolve: {
  alias: {
    "@hf-shift-management": "../../packages/shift-management/src/index"
  }
}

已做验证 #

• 将导入路径替换为绝对路径后，vite命令可正常启动开发服务器，确认是别名解析问题
• 单独创建的Web应用可正常解析该别名，推测问题与Electron环境配置相关

问题原因 #

Electron开发模式下，主进程与渲染进程的文件解析上下文存在差异：Vite默认的别名配置仅对渲染进程生效，若主进程代码中也使用了该别名，或相对路径因Electron启动目录导致层级偏差，就会触发解析失败。此外，NX Monorepo的依赖联动配置若未同步，也可能导致路径解析异常。

修复步骤 #

1. 用绝对路径替代相对路径
   在vite.config.ts中使用path.resolve生成绝对路径，避免层级偏差：

   import path from 'path';
   
   export default defineConfig({
     resolve: {
       alias: {
         '@hf-shift-management': path.resolve(__dirname, '../../packages/shift-management/src/index')
       }
     }
     // 其他配置项
   });
   

2. 同步主进程的别名配置
   若主进程代码也使用了该别名，需额外配置主进程的路径解析：

   • 在主进程的tsconfig.json中添加相同的paths配置
   • 安装tsconfig-paths依赖：pnpm add -D tsconfig-paths
   • 修改dev脚本，让Node.js识别tsconfig路径：

     "dev": "ts-node -r tsconfig-paths/register ./src/main.ts",
     

   • 若使用vite-plugin-electron，需在插件配置中单独声明主进程的别名：

     import electron from 'vite-plugin-electron';
     
     export default defineConfig({
       plugins: [
         electron({
           main: {
             entry: 'src/main.ts',
             vite: {
               resolve: {
                 alias: {
                   '@hf-shift-management': path.resolve(__dirname, '../../packages/shift-management/src/index')
                 }
               }
             }
           }
         })
       ]
     });
     

3. 确认NX Monorepo依赖联动
   在apps/desktop-app/project.json中明确依赖声明，确保NX路径解析与Vite别名联动：

   "dependencies": {
     "@hf-shift-management": "*"
   }
   

4. 检查Vite环境配置
   避免因环境判断导致dev模式下别名被忽略，比如移除类似以下的错误配置：

   // 错误示例，需删除
   resolve: {
     alias: process.env.NODE_ENV === 'production' ? { ... } : {}
   }
   

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