vue3+ts 配置别名遇到的问题

100 阅读1分钟

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" },