如何在Visual Studio 2022的Vite React客户端项目中运行TT(T4)模板

因为Vite React项目属于前端项目类型，Visual Studio默认不会为其启用T4模板的自动生成功能，以下是几种实用的解决办法：

方案1：复用现有C#项目的T4支持（推荐） #

把.tt模板放在你的C#业务项目中，配置生成路径直接指向Vite React项目的代码目录：

• 右键C#项目中的.tt文件 → 属性
• 设置「自定义工具」为TextTemplatingFileGenerator
• 在「输出文件」中填写相对路径，比如../ViteReactClient/src/generated/ApiTypes.ts（根据你的项目结构调整）
• 保存后，VS会自动将模板生成的文件同步到Vite项目指定目录，前端可直接引用生成的文件

方案2：通过命令行工具手动/自动生成 #

使用官方的dotnet T4命令行工具，在Vite项目中独立处理模板生成：

1. 全局安装dotnet T4工具：

   dotnet tool install -g dotnet-t4
   

2. 在Vite项目根目录创建templates文件夹，放入你的.tt模板文件
3. 在package.json的scripts中添加生成命令：

   "scripts": {
     "generate-t4": "t4 ./templates/your-template.tt -o ./src/generated/output.ts",
     "dev": "npm run generate-t4 && vite",
     "build": "npm run generate-t4 && vite build"
   }
   

4. 启动开发服务或构建时，会自动先执行T4生成；也可以单独运行npm run generate-t4手动触发更新

如果需要实时监听.tt文件变化自动生成，可结合chokidar-cli工具：

• 安装依赖：npm install chokidar-cli --save-dev
• 添加监听脚本：

  "scripts": {
    "watch-t4": "chokidar ./templates/*.tt -c \"npm run generate-t4\""
  }
  

  启动后会在模板文件修改时自动重新生成

方案3：使用VS扩展增强前端项目的T4支持 #

安装支持Web项目的T4相关扩展，让VS直接在Vite项目中处理.tt模板：

• 打开VS的「扩展管理」，搜索并安装T4 Toolbox或T4 Editor（选择兼容VS2022的版本）
• 安装完成后，在Vite项目中添加.tt文件，右键设置「自定义工具」为TextTemplatingFileGenerator，即可像普通React项目一样自动生成文件

注意事项 #

• 确保生成的文件（如.ts/.tsx）被Vite识别，可在tsconfig.json的include数组中添加src/generated/**/*
• 若使用方案1，注意相对路径的正确性，避免因项目结构变更导致生成失败
• 命令行方式下，需保证dotnet命令在系统PATH中可访问

内容的提问来源于stack exchange，提问作者Igor