vite vue3+ts 配置 “@” 路径别名

288 阅读1分钟

引言

        最近在做vue3+ts vite构建的项目,第一次在项目中接触vue3和ts,还是有很多需要记录的地方。第一次接触并且一个人完成,最近感觉百度次数比以前加起来都多。挺好!也是培养学习的一个过程。 话不多说,直接上版本号:
"vite": "^4.4.9",
"vue": "^3.3.4",
"typescript": "~5.1.6",

1.安装依赖

npm i @types/node -D

2.配置vite.config.js

resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) }, //导入时想要省略的扩展名列表 extensions: [".js", ".ts", ".json"], },

3.配置tsconfig.json

image.png "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] } },

注意点

image.png