vue3+vite 配置使用 @ 引入文件,解决找不到模块“@/**”或其相应的类型声明

解决找不到模块“@/utils/request”或其相应的类型声明我们需要配置一下vite

1. 我们需要使用path包的resolve去引用路径,所以第一步我们需要执行npm i -D @types/node 安装一下path:

npm i -D @types/node

2.接下来是配置 vite.config.ts：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入resolve
import { resolve } from 'path'

// 文档: https://vitejs.dev/config/ 
export default defineConfig({
  plugins: [vue()],

  resolve: {
    // 设置路径别名
    alias: {
      '@': resolve(__dirname, './src'),
      '*': resolve('')
    },
  }
})

3. 配置 tsconfig.json，在 compilerOptions中加入一下两项: "baseUrl": ".", "paths": {"@/*": ["src/*"]}:

"compilerOptions": {

 /* 配置@路径 */
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },

4. 最后就可以引入不报错了