JavaScript 中怎么在 Vite 中配置路径别名简化文件引入-js教程-PHP中文网

在 Vite 中配置路径别名需同时设置 vite.config.ts 的 resolve.alias 和 tsconfig.json 的 compilerOptions.paths 与 baseUrl，否则编辑器跳转和类型检查会失败；示例配置 '@': resolve(__dirname, 'src') 与 "@/": ["src/"] 需严格对应，并重启 TS 服务验证生效。

javascript 中怎么在 vite 中配置路径别名简化文件引入

在 Vite 中配置路径别名（alias）主要通过 vite.config.ts（或 .js）中的 resolve.alias 选项实现，并需同步配置 TypeScript 的 tsconfig.json，否则编辑器和类型检查会报错。

1. 在 vite.config.ts 中设置 alias

使用 Node.js 的 path.resolve 指向项目目录，避免相对路径出错：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '@components': resolve(__dirname, 'src/components'),
      '@utils': resolve(__dirname, 'src/utils'),
      '@assets': resolve(__dirname, 'src/assets')
    }
  }
});

注意：__dirname 在 ES 模块中默认不可用，若用 .mjs 或 type: "module"，改用：

import { dirname } from 'path'; import { fileURLToPath } from 'url';
const __dirname = dirname(fileURLToName(import.meta.url));

2. 同步配置 tsconfig.json

否则 VS Code 无法识别别名，TS 类型检查会报 Cannot find module 错误：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"],
      "@assets/*": ["src/assets/*"]
    }
  }
}

配置后重启 TS 服务（VS Code 中按 Ctrl+Shift+P → 输入 Restart TS server）。