Vite Rollup路径别名仅在Electron文件中无法解析问题求助

问题定位 #

Vite配置的@别名在组件、服务类文件中正常工作，但在src/electron/modules/A.ts中导入@/shared/B.ts时触发Rollup解析错误，仅@/types能正常识别。环境为Vite 4.4.9 + Windows 11，已尝试绝对路径定义别名但无效。

解决方案 #

1. 同步Electron主进程的别名配置 #

Vite对Electron主进程/预加载脚本的构建逻辑独立于渲染进程，需单独为Electron相关配置同步别名：

import { defineConfig } from 'vite';
import electron from 'vite-plugin-electron';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'), // 用path.resolve适配Windows路径
    },
  },
  plugins: [
    electron({
      main: {
        entry: 'src/electron/main.ts',
        vite: {
          resolve: {
            // 为主进程单独配置相同别名
            alias: {
              '@': path.resolve(__dirname, './src'),
            },
          },
        },
      },
    }),
  ],
});

注意：避免直接使用"/src"作为别名路径，Windows系统路径分隔符为\，path.resolve会自动适配系统规则。

2. 修正TypeScript配置 #

确保tsconfig.json的paths与Vite别名一致，且include覆盖Electron目录：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*", "src/electron/**/*"] // 显式包含electron目录
}

此前@/types能正常解析，大概率是types目录被默认include覆盖，但electron目录未被纳入，导致TS类型检查通过但打包解析失败。

3. 补充文件扩展名配置 #

在Vite的resolve配置中显式声明支持的扩展名，避免Rollup对Electron文件的解析异常：

resolve: {
  alias: {
    '@': path.resolve(__dirname, './src'),
  },
  extensions: ['.ts', '.js', '.vue', '.json'], // 明确支持的文件扩展名
}

必要时可在Electron文件的导入中显式添加扩展名，如import whatever from "@/shared/B.ts"。

4. 清理Vite缓存 #

执行命令清除旧缓存，避免配置修改后缓存残留导致的解析问题：

npx vite --clear-cache

验证方法：修改配置后重启Vite服务，重新构建Electron项目，检查A.ts中的导入是否正常解析。

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