vue3 vite配置@根路径---解决：找不到模块“./xx/xxx.vue”或其相应的类型声明-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3 vite配置@根路径---解决：找不到模块“./xx/xxx.vue”或其相应的类型声明。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在vite.config.js中配置

import { resolve } from "path"

export default defineConfig({
  plugins: [vue()],
  // 配置根路径
  resolve: {
    // ↓路径别名，主要是这部分
    alias: {
      "@": resolve(__dirname, "./src")
    }
  }
})

如果在ts中使用可能会报错：
vite配置@路径,vue,vue.js,javascript,前端
解决方案：npm install --save-dev @types/node

配置根路径后，引入文件可能会报红：vue3+ts报错：找不到模块“@/xxx”或其相应的类型声明。，或者是引入.vue文件的时候报红：vue3+ts报错：找不到模块“./views/login/index.vue”或其相应的类型声明。

出现这种情况的解决方法有两种
第一种:
是在tsconfig.json中修改路径
vite配置@路径,vue,vue.js,javascript,前端
前面加一个/引入.vue文件后就不会报红。但这种方法并不适合配置了@根路径的情况，配置了根路径，前面加/会报错，所以这边需要去掉斜杠，有意思的是，去掉斜杠，引入.vue文件又不会报错。
在配置paths的时候需要一个基准路径才能配置相对路径，也就是这里的 "baseUrl": "./"

第二种：
在根目录下新建env.d.ts，将下面的内容复制进去即可。文章来源地址https://www.toymoban.com/news/detail-604459.html

declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
    const component: DefineComponent<{}, {}, any>
    export default component
  }