1、在查阅文章中有看到文章需要安装path、@types/node两个包。 在食用的过程中遇到了一些问题,发现在不使用path这个包的时候,就可以正常使用别名,下面是配置过程
2、安装npm install @types/node --save
3、在vite.config.ts中配置
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: [
{
find: "@",
replacement:resolve(__dirname, "./src")
}
]
}
})
4、在tsconfig.json中配置baseUrl和paths这两项
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"moduleResolution": "Node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["ESNext", "DOM"],
"skipLibCheck": true,
"types": ["element-plus/global"]
}
5、配置编辑器在使用@别名的时候有代码提示
5.1 打开vscode的设置:快捷键ctrl + ,
5.2 点击右上角的位置有个打开设置的图标(位于那个三角形和一本书中间的图标,鼠标移动上去会提示打开设置json)
5.3 在json文件中配置一下就可以有代码提示了
"path-intellisense.mappings": { "@": "${workspaceRoot}/src" },