Azure静态Web应用子目录Angular项目CSS/JS MIME类型异常排查

一、修正Angular构建配置 #

每个Angular应用必须设置对应子目录的baseHref，确保资源路径指向正确：

• 针对hostedPages应用，构建命令添加--base-href "/hostedPages/"：

  ng build --prod --base-href "/hostedPages/"
  

• 针对profile应用，构建命令添加--base-href "/profile/"：

  ng build --prod --base-href "/profile/"
  

若使用Angular 16+的多项目配置，可直接在angular.json的对应项目中配置baseHref字段：

"projects": {
  "profile": {
    "architect": {
      "build": {
        "options": {
          "baseHref": "/profile/",
          ...
        }
      }
    }
  }
}

二、规范服务器文件结构 #

确保两个应用的构建产物分别存放在对应子目录下，最终结构如下：

/
├─ hostedPages/
│  ├─ index.html
│  ├─ styles.css
│  ├─ main.js
│  └─ ...（其他Angular构建产物）
├─ profile/
│  ├─ index.html
│  ├─ styles.css
│  ├─ main.js
│  └─ ...（其他Angular构建产物）
└─ staticwebapp.config.json

三、调整staticwebapp.config.json配置 #

添加路由规则与MIME类型映射，确保静态资源被正确识别：

{
  "routes": [
    {
      "route": "/hostedPages/*",
      "serve": "/hostedPages/index.html",
      "statusCode": 200
    },
    {
      "route": "/profile/*",
      "serve": "/profile/index.html",
      "statusCode": 200
    }
  ],
  "mimeTypes": {
    ".css": "text/css",
    ".js": "application/javascript",
    ".html": "text/html",
    ".json": "application/json"
  }
}

关键说明：

• routes规则仅处理SPA路由跳转，Azure静态Web应用会优先匹配实际存在的静态文件，不会拦截资源请求
• 显式配置mimeTypes可强制指定文件类型，避免服务器自动识别错误

四、验证部署结果 #

1. 确认构建产物已正确上传到对应子目录
2. 通过Azure门户的诊断工具查看资源响应头，检查Content-Type是否符合预期
3. 清除浏览器缓存后重新访问https://xyz/profile/，验证资源加载情况

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