vue ts 外部文件

在Vue项目中使用TypeScript时，如果需要引入外部文件，有两种常见的方式。

方式一：在src目录下创建一个以.d.ts结尾的文件，例如env.d.ts。在该文件中使用declare module语法声明模块，并导出需要引入的组件。例如：

declare module "*.vue" {
  import { DefineComponent } from "vue"
  const component: DefineComponent<{}, {}, any>
  export default component
}

然后，在tsconfig.json文件中添加一个新的参数outDir，用于指定输出目录。同时，需要将allowJs和allowSyntheticDefaultImports参数设置为true，允许引用没有默认导出的模块。例如：

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "outDir": "./"
  }
}

方式二：类似于方式一，也是在src目录下创建一个文件夹，可以自定义文件夹名称，然后在该文件夹中创建一个以.d.ts结尾的文件，内容与方式一相同。需要注意的是，如果创建了文件夹，需要在tsconfig.json文件中声明该文件夹。例如：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": \["src/*"\],
      "~/*": \["typings/*"\] // 声明typings文件夹
    }
  }
}

以上是在Vue项目中使用TypeScript引入外部文件的两种常见方式。
#### 引用[.reference_title]
- *1* *3* [vite+ts引入 .vue或 .ts文件时提示找不到模块](https://blog.csdn.net/qq_39215166/article/details/123876555)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue3 main.ts文件中引入js文件](https://blog.csdn.net/m0_49403034/article/details/125677267)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]