Vue3里的main.js报错

最近在学Vue3,用vite脚手架创建了项目,发现main.js里面导入App模块竟然报错了

如图:

问题:

未定义 .vue文件类型导致ts无法解析类型,

方案一:

在env.d.ts文件声明就行了

declare module '*.vue' {

  import type { DefineComponent } from 'vue';

  const vueComponent: DefineComponent<{}, {}, any>;

  export default vueComponent;

}

 方案二:

在tsconfig.json中加入:

"compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "strict": false,
    "jsx": "preserve",
    "moduleResolution": "Node"
  }

如果还是报错:那就得从扩展插件下手了

需要去VSCode扩展插件禁用Vetur插件,开启Volar插件然后点击重新加载或退出VSCode重新进去就不报错了