vue3+vite在main.ts或者main.js文件中引入/App.vue报错（/App.vue不是模块）-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3+vite在main.ts或者main.js文件中引入/App.vue报错（/App.vue不是模块）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue3报错提示找不到模块“/App.vue”或其相应的类型声明

场景复现

在使用 vue3➕vite➕ts 或者 js 搭建前端框架时，在main.ts或者main.js中引入/App.vue报错。报错内容为 /App.vue不是模块。下面我们分vue3+js和vue3+ts两种情况讨论，给出相应的解决方案。

情况一、vue3.0+js

报错显示：
vite main.js,Vue,报错,vue.js,javascript,前端,typescript
报错原因：javascript只能理解.js文件，无法理解.vue文件。

解决方案：根目录新建jsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*":[
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modeules",
        "dist"
    ]
}

此时问题已经解决：👇👇👇
vite main.js,Vue,报错,vue.js,javascript,前端,typescript

情况二、vue3.0+ts

报错显示：
vite main.js,Vue,报错,vue.js,javascript,前端,typescript
报错原因：typescript只能理解.ts文件，无法理解.vue文件。

方案一：根目录新建env.d.ts

在根目录新建env.d.ts文件，写入以下内容：

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
}

vite main.js,Vue,报错,vue.js,javascript,前端,typescript
也可以解决问题，缺点是需要一直打开

方案二：根目录新建tsconfig.json

在根目录新建tsconfig.json文件，写入以下内容：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": false,
    "jsx": "preserve",
    "moduleResolution": "node"
  }
}