src别名的配置
# Web
在开发项目的时候文件与文件关系可能很复杂，因此我们需要给src文件夹配置一个别名！！！\
# 在vite.config.ts配置
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
}
}
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# TypeScript 编译配置
// tsconfig.json
{
"compilerOptions": {
"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
"paths": { //路径映射，相对于baseUrl
"@/*": ["src/*"]
}
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# React Native
# 在tsconfig.json配置
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
// 其他选项...
},
// 其他选项...
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 解释
baseUrl被设置为"."，这意味着路径别名将相对于 tsconfig.json 文件所在的目录解析
paths 对象中的"@/*"键表示路径别名，["src/*"]值表示这个别名对应的实际路径
# 在 babel.config.js 配置
React Native 不直接支持
TypeScript的路径别名，需要使用babel-plugin-module-resolver插件
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['./src'],
alias: {
'@': './src',
},
},
],
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 解释
在这个配置中，root 选项被设置为['./src']，这意味着路径别名将相对于 src 目录解析。alias 对象中的'@'键表示路径别名，'./src' 值表示这个别名对应的实际路径。
上次更新: 2025/06/23, 07:26:12