JavaScript 中 Vite 怎么配置路径别名（Alias）简化模块导入的相对路径书写-js教程-PHP中文网

在 vite 项目中配置路径别名需两步：1. 在 vite.config.ts 的 resolve.alias 中用 path.resolve() 设置绝对路径映射；2. 在 tsconfig.json 的 compileroptions.paths 中配置对应路径别名并设 baseurl 为 "."，修改后需重启 ts 服务。

javascript 中 vite 怎么配置路径别名（alias）简化模块导入的相对路径书写

在 Vite 项目中配置路径别名（Alias），主要通过修改 vite.config.ts（或 vite.config.js）中的 resolve.alias 选项实现，同时需确保 TypeScript 类型识别正常（如使用 TS）。

1. 在 vite.config.ts 中配置 resolve.alias

Vite 基于 Rollup 的解析机制，通过 resolve.alias 映射路径前缀到实际目录。推荐使用 path.resolve() 构建绝对路径，避免相对路径错误：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import * as path from 'path';
<p>export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(<strong>dirname, 'src'),
'@components': path.resolve(</strong>dirname, 'src/components'),
'@utils': path.resolve(<strong>dirname, 'src/utils'),
'@assets': path.resolve(</strong>dirname, 'src/assets')
}
}
});
</p>

✅ 配置后即可在代码中直接使用：

Vite

为开发、生产构建和库打包配置并优化 Vite。

下载

import Button from '@/components/Button.vue';
import { debounce } from '@utils/helpers';
import logo from '@assets/logo.png';

2. 配置 tsconfig.json 支持 TypeScript 路径提示和类型检查

仅配 Vite alias 不足以让 VS Code 或 tsc 识别别名——还需在 tsconfig.json 中补充 compilerOptions.baseUrl 和 compilerOptions.paths：

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

⚠️ 注意：paths 中的键必须带通配符 *，且与 alias 中的写法逻辑一致；改完需重启 TS 服务（如在 VS Code 中执行 “TypeScript: Restart TS server”）。