vue配置路径别名方式(@/*)
更新时间:2025年11月03日 09:12:07 作者:A0曹小鱼吖
文章介绍了如何配置路径别名,包括安装@types/node、编辑vite.config.ts或js文件、配置tsconfig.json以及重启软件等步骤
vue配置路径别名(@/*)
好几次配置路径别名有问题,要调好久。
直接把重点记录下来,防止踩坑。
1、安装 @types/node
npm i @types/node
2、编辑vite.config.ts(js)
引入path,设置路径,在Viteconfig中配置 resolve: { alias },

完整代码:
import { defineConfig, loadEnv, type ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import tailwindcss from '@tailwindcss/vite'
import { resolve } from 'path'
const pathResolve = (dir: string) => {
return resolve(__dirname, '.', dir);
};
const alias: Record<string, string> = {
'@': pathResolve('./src'),
};
const viteConfig = defineConfig((mode: ConfigEnv) => {
const env = loadEnv(mode.mode, process.cwd());
// 判断是否开发环境
const isDev = env.VITE_ENV === 'development';
return {
plugins: [
vue(),
tailwindcss(),
AutoImport({
imports: ['vue', 'vue-router', 'pinia'], // 自动导入的依赖库数组
dts: true, // 生成自动导入类型定义文件
})
],
resolve: { alias }, // 路径别名配置
.....
}
})
export default viteConfig;3、配置 tsconfig.json
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
},完整代码:可根据自己项目相应更改配置
{
"compilerOptions" : {
"target": "esnext",
"module": "esnext",
"lib": ["esnext", "dom", "dom.iterable", "scripthost"],
"isolatedModules": true,
"strict": true,
"moduleResolution": "node",
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
},
"types": ["vite/client"],
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts"],
"exclude": ["node_modules", "dist"]
}
4、如果配置完不生效的话
重启软件,例如,我用的是VSCode,那就全部关掉重新打开,刷新IDE缓存。
5、设置完成
可使用 @/ 匹配路径。

总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue Element前端应用开发之常规Element界面组件
在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框、多文本框、下拉列表,以及按钮、图片展示、弹出对话框、表单处理、条码二维码等等,本篇随笔基于普通表格业务的展示录入的场景介绍这些常规Element组件的使用2021-05-05


最新评论