路径别名# Vue3+TS+Vite 配置路径别名
# 1.通过当前相对路径直接配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue()
],
// 设置路径别名
resolve: {
alias: [
{
find: '@',
replacement: path.resolve('./src')
}
]
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- 如果是Vite2.0，有可能没有生效，可以修改一下TypeScript的配置。找到ts.config.json文件，进行以下配置：
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
// 路径配置
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"exclude": ["node_modules"],
"references": [{ "path": "./tsconfig.node.json" }]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 2.借助 node 的 __dirname
__dirname:在哪里使用,就是表示当前文件所在的
目录例如如果当前文件的全路径是 c:/share/nodeday02/text1/b.js，那么__dirname 表示 c:/share/nodeday02/text1
我们可以使用__dirname表示绝对路径,但是采用的是相对的形式
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import alias from '@rollup/plugin-alias'; // 注意，如果不加这个的话，alias可能不生效
import * as path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue()
],
// 设置路径别名
resolve: {
alias: [
{
find: '@',
replacement: path.resolve(__dirname, 'src')
}
]
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19