vue3构建项目时，ts文件引用静态文件夹下的js文件报错。Could not find a declaration file for module ‘../../public/config.js‘

一、问题背景

（记录一次问题解决过程，但理解得不透彻，如果有更好的方案，欢迎提出来呀~）

用一个api.ts文件管理接口url地址，为方便修改服务地址，config.js管理访问服务地址，api.ts引用该config.js文件，项目本地运行的时候可行。文件结构如下（局部）：

api.ts的引用内容如下：

config.js文件内容如下：

但是npm run build 打包时，报错如下：

二、解决方法

1.新增*.d.ts声明文件types.d.ts，内容如下：

declare interface Window {
  global_config: string
}

2.在tsconfig.app.json中的include配置中增加types.d.ts

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/**/*", "types.d.ts"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

3.根目录下的public中的config.js修改如下：

4.api.ts的引用修改为：

 5.在index.html引入config.js，引用静态文件，参考官网解释如下图：

静态资源处理 | Vite 官方中文文档

故而，在index.html中增加引入如下图（最开始用了 "./public/config.js",打包部署后会报config.js 404）：

三.效果

npm run build构建成功，并且在打包好后的前端项目中可以修改config.js中的数据，方便切换。

打包后文件结构如图：