vue3引入.vue文件以及.ts文件时提示找不到模块-Toy模板网

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

1.找不到vue文件的，是因为ts无法解析我们的vue结尾的文件，所以需要在src目录下，

新建一个d.ts结尾的文件(可以叫env.d.ts)

然后里面这样写就可以

/// <reference types="vite/client" />

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

// 环境变量 TypeScript的智能提示
interface ImportMetaEnv {
	VITE_APP_TITLE: string;
	VITE_APP_PORT: string;
	VITE_APP_BASE_API: string;
}

interface ImportMeta {
	readonly env: ImportMetaEnv;
}

2，找不到ts文件就更正常了，我们需要在tsconfig.json里面进行配置（没有的话就新建一个，在根src同级的目录下面）。就直接复制就完事了，

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "useDefineForClassFields": true,
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": "./",
    "paths": {
      "@": ["src"],
      "@/*": ["src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "*.ts"
  ],
  "references": [{ "path": "./tsconfig.node.json" }]
}

有的博主可能直接是在include里面加