部署Vite构建的React至Azure Linux App Service遇MIME类型错误

问题根源 #

Azure App Service Linux环境默认使用Nginx作为Web服务器，它未给.mjs文件配置正确的MIME类型（应为application/javascript），导致浏览器将这类文件识别为text/plain，触发模块加载错误。而web.config是IIS的配置文件，Linux环境完全不生效，这就是之前操作无效的原因。

具体解决方案 #

方法1：添加Nginx自定义配置文件 #

• 在React项目根目录创建.azure/nginx文件夹层级
• 在nginx文件夹内新建default.conf文件，写入以下配置：

server {
    listen 8080;
    server_name localhost;
    root /home/site/wwwroot;
    index index.html index.htm;

    # 为.mjs配置正确的MIME类型
    types {
        application/javascript js mjs;
    }

    location / {
        try_files $uri $uri/ /index.html;
    }
}

• 重新构建项目，将包含.azure文件夹在内的所有构建产物部署到/home/site/wwwroot
• 重启Azure App Service实例，使新的Nginx配置生效

方法2：用.htaccess配置（适用于Apache环境） #

若你的App Service使用Apache（较少见），在/home/site/wwwroot下新建.htaccess文件，添加：

AddType application/javascript .mjs

方法3：修改Vite构建配置，避免生成.mjs文件 #

在项目的vite.config.js中添加配置，让构建产物生成.js而非.mjs：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`
      }
    }
  }
})

重新构建并部署即可。

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