vue3 ts 如何定义不同的配置文件, 来实现不同index.html入口

在 Vue3 中结合 TypeScript 使用，如果你想为不同的环境定义不同的配置文件并对应不同的 index.html 文件，你可以这样做：

1. **创建不同的构建配置**：
- 首先，安装 `@vue/cli-service` 和相关插件（如 `@vue/cli-plugin-typescript`），然后初始化项目。如果你已经有项目，可以跳过这一步。

   vue create your-project --type=typescript

2. **为每个环境创建一个配置文件**：
- 在 `src` 目录下创建一个 `config` 文件夹，并在其中创建多个 `.ts` 文件，例如：`config/prod.ts`, `config/dev.ts` 或 `config/test.ts`。
- 在这些文件中，分别导入默认的配置(`vue.config.js`)，然后根据需要覆盖特定的选项，比如 `publicPath`、`productionSourceMap` 等。例如：

   import { defineConfig } from 'vue-cli-service';
   
   export default defineConfig({
     // 这里是你想覆盖的配置部分
     publicPath: process.env.NODE_ENV === 'production' ? '/your-prefix/' : '/',
     outputDir: `${process.env.NODE_ENV === 'production' ? 'dist' : 'dist'}-${process.env.NODE_ENV}`,
   });

这里我们通过 `NODE_ENV` 环境变量判断是生产环境还是开发环境。

3. **设置环境变量**：
- 在项目的根目录下，添加一个 `.env.production` 或 `.env.development` 文件，用于设置不同的环境变量，比如 `NODE_ENV`。
- 如果使用的是 CI/CD 工具，可以在构建脚本中动态设置环境变量。

4. **运行构建**：
- 根据不同的需求选择对应的配置文件构建：

   npx vue-cli-service build --mode production  # 生产环境
   npx vue-cli-service build --mode development  # 开发环境