vue3+vite+ts 框架中 将请求超时时间，设置一个配置文件config.json的常量，不需要每次修改打包，在服务器上修改配置文件即可生效，如何配置本地环境与生产环境

在 Vue3、Vite 和 TypeScript 的项目中，想要将请求超时时间作为一个配置项并从 `config.json` 文件读取，你可以按照以下步骤操作：

1. **创建配置文件**:
首先，创建一个名为 `config.json` 或者你选择的其他名称的文件，并保存到项目的根目录下。这个文件通常用于存储所有环境共享的配置。

{
  "axios": {
    "timeout": 5000 // 这里设置了默认的超时时间为5秒
  }
}

2. **引入配置**:
使用 Vite 提供的 `vite.config.ts` 来动态加载并应用配置。在这个文件中，你需要安装 `@vue/cli-plugin-config` 并启用它来处理 JSON 配置。

   npm install @vue/cli-plugin-config --save-dev

然后在 `vite.config.ts` 中添加如下代码，导入并使用 `config` 插件：

import { defineConfig } from 'vite';
import { loadEnvFile } from '@vue/cli-service';

// 加载环境变量
const env = await loadEnvFile();

export default defineConfig({
  build: {
    target: env.VUE_CLI_BUILD_TARGET,
  },
  server: {
    proxy: {
      ... // 其他proxy配置
    },
    // 使用配置插件读取config.json
    base: './',
    open: true,
    middleware: (app) => {
      app.use(async (ctx, next) => {
        ctx.config = await import('./config.json');
        await next();
      });
    },
  },
});

3. **访问配置**:
在你的 Vue 组件或者 vuex store 中，通过 `this.$config.axios.timeout` 访问和使用这个超时值。确保你在组件或模块初始化时注入了 `Vue.prototype.$config`。

4. **区分环境**:
对于生产环境和本地开发环境，可以在启动 Vite 时传入不同的环境变量。例如，你可以使用命令行参数 `-D`（开发模式）或 `-P`（生产模式）。然后更新 `loadEnvFile()` 函数以检查这些环境变量：

if (process.env.NODE_ENV === 'production') {
  const config = await loadEnvFile({ prefix: 'PROD_' }); // 生产环境前缀
} else {
  const config = await loadEnvFile(); // 开发环境默认加载
}

现在，如果你需要更改超时时间，只需要在 `config.json` 中修改，无需重启服务。如果部署到不同的环境，只需在部署时指定对应的环境变量或脚本即可。