webpack中可以通过resolve.alias定义项目路径别名,这样可以在引入文件时,不再需要使用相对路径,统一以根路径(/src/)作为起点。vite也可以定义路径别名
vite.config.ts
resolve.alias 配置
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
export default defineConfig({
plugins: [react()],
resolve: {
// 配置路径别名。--->src下的代码
alias: {
'@': path.resolve(__dirname, './src'),
'@css': path.resolve(__dirname, './src/assets/css'),
},
},
});
tsconfig.json
TypeScript编写,还需要修改一下TypeScript的配置:
paths 和 baseUrl
{
// ...
"compilerOptions": {
// ...其他配置
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@css/*": ["src/assets/css/*"],
}
},
// ...
}