React Vite+TypeScript部署Azure静态Web应用MIME类型错误求助

问题根源 #

核心问题是直接部署了Vite项目的源码文件，而非执行npm run build后生成的dist目录下的编译产物。Azure静态Web应用无法解析TSX/JSX源码，导致服务器返回错误的MIME类型，且浏览器无法识别JSX语法（出现<符号错误）。

正确部署步骤 #

1. 本地构建项目
   在项目根目录执行构建命令，生成编译后的静态文件：

   npm run build
   

   执行完成后，项目根目录会生成dist文件夹，里面是可直接部署的静态资源。

2. 调整Azure静态Web应用部署配置

   • 若使用VS Code扩展部署：
     在部署向导中，将应用位置设置为dist，而非项目根目录。
   • 若使用GitHub Actions部署：
     修改.github/workflows/azure-static-web-apps-xxx.yml文件中的app_location字段为dist：

     app_location: "dist" # 原配置可能为 "/"
     api_location: "" # 无后端API则留空
     output_location: ""
     

3. 清理无效配置
   之前添加的staticwebapp.config.json和vite.config.ts中的MIME类型配置可以删除，因为构建后的文件都是标准JS/CSS/HTML，Azure默认会正确识别MIME类型。

过往方案无效原因 #

• 修改MIME类型仅能让服务器以JS类型返回TSX文件，但浏览器仍然无法解析JSX语法（<React.StrictMode>这类语法需要编译为纯JS）。
• vite.config.ts中的server.mimeType配置仅作用于本地开发服务器，对Azure部署的生产环境无效。

替代工具建议（若需更换） #

如果一定要替换Vite，推荐以下性能相当的工具：

• Snowpack：基于ES模块的构建工具，冷启动快，适配React项目。
• Rollup：Vite底层依赖的打包工具，配置灵活，适合需要精细控制构建流程的场景。
• Parcel：零配置构建工具，开箱即用，性能优异。

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