Vite 4.4.9+TypeScript+Vue.js别名配置失效问题求助

你的核心问题是Vite 的别名配置位置错误——你把 resolve.alias 放在了 build.rollupOptions 内部，这只会作用于生产构建阶段的 Rollup 打包逻辑，开发环境的路径解析不会生效；同时 TypeScript 的路径映射也可能因配置不完整导致识别异常。

分步修正方案： #

1. 调整 Vite 配置的别名位置

将 resolve.alias 移到 Vite 配置的顶层，确保开发、构建阶段都能识别别名：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path'; // 必须导入 path 模块

export default defineConfig({
    plugins: [vue({
        template: {
            compilerOptions: {
                isCustomElement: (tag) => {
                    return tag.startsWith('file-uploader') || tag.startsWith('file-manager') || tag.startsWith('custom-image');
                }
            }
        }
    })],
    // 把 resolve 配置移到顶层全局生效
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    },
    build: {
        target: "es2018",
        rollupOptions: {
            treeshake: false,
            input: {
                ...fs.readdirSync(entryDir).reduce((acc, filePath) => {
                    const componentName = getComponentName(filePath);
                    acc[componentName] = `${entryDir}/${componentName}.js`;
                    return acc;
                }, {}),
            },
            output: {
                dir: "../wwwroot/pages",
                entryFileNames: "[name].js",
                chunkFileNames: "[name].[hash].js"
            }
            // 移除此处的 resolve.alias 配置
        }
    }
});

2. 完善 TypeScript 配置

确保 tsconfig.json 包含 include 字段，让 TS 能识别 src 目录下的所有文件：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    // 保留你的其他编译配置（如 target、module 等）
  },
  "include": ["src/**/*", "*.vue"],
  "exclude": ["node_modules"]
}

3. 清除缓存并重启服务

• 关闭当前 Vite 开发服务器，重新启动
• 重启 IDE（如 VS Code），执行 TypeScript: Restart TS Server 清除语言服务缓存

额外排查点 #

如果仍不生效，检查以下内容：

• 确认 src 目录存在于项目根目录，路径拼写无错误
• Vite 4 已原生支持 TS 的 paths 映射，无需额外安装 tsconfig-paths 插件，避免冲突
• 导入语句的文件名大小写需与实际文件一致（Windows 不区分大小写，但构建时可能报错）

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