引言
项目中的结构比较固定的,而通常在实际的开发中,会大量的涉及到使用import语法,一般都是会采用@路径别名的方式,去进行定位文件夹,那么在vue3+ts+vite+vscode的环境下如何设置?
vite中路径别名设置
注意配置项下的resolve下的alias就是进行相应的设置。
// vite.config.ts
import type { UserConfig, ConfigEnv } from 'vite';
import { loadEnv } from 'vite';
import path from 'path';
export default ({ command, mode }: ConfigEnv): UserConfig => {
const root = process.cwd();
const env = loadEnv(mode, root);
// The boolean type read by loadEnv is a string. This function can be converted to boolean type
const viteEnv = wrapperEnv(env);
const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_DROP_CONSOLE } = viteEnv;
const isBuild = command === 'build';
return {
base: VITE_PUBLIC_PATH,
root,
resolve: {
alias: {
'@': path.join(__dirname, './src'),
'@components': path.join(__dirname, './src/components'),
'@utils': path.join(__dirname, './src/utils'),
'@router': path.join(__dirname, './src/router'),
'@request': path.join(__dirname, './src/utils/request'),
'@store': path.join(__dirname, './src/store'),
'@storage': path.join(__dirname, './src/utils/storage'),
'@model': path.join(__dirname, './src/utils/model'),
'@service': path.join(__dirname, './src/api/service'),
'@handler': path.join(__dirname, './src/api/handler'),
},
},
...
}
tsconfig中的配置
进行了vite的配置后,vite是可以进行正确的路径解析,但是进行点击.vue文件跳转时,跳转进入的是vue定义的模块
1.png 2.png
需要在tsconfig下的path配置项中进行处理:
// tsconfig.json
{
"compilerOptions": {
...
"paths": {
"@/*": ["src/*"],
"@model/*": ["src/api/model/*"],
"@service/*": ["src/api/service/*"],
"@handler/*": ["src/api/handler/*"],
"@types/*": ["types/*"],
"@utils/*": ["src/utils/*"],
"@router/*": ["src/router/*"],
"@store/*": ["src/store/*"],
"@components/*": ["src/components/*"],
"@request": ["src/utils/request"],
"@router": ["src/router"],
"@store": ["src/store"],
"@storage": ["src/utils/storage"]
}
},
...
}
带有 /* 这种指的是文件夹 不带的可以直接定位到文件的,比如 @router router不是文件,但是它下面有index.ts,因此跳转的是router/index.ts。
配置完成后,就可以成功实现跳转:
3.png
网友评论