如何在Azure静态Web应用部署多语言Angular应用（无需多实例）

可以在Azure静态Web应用中部署多语言Angular应用，无需为每种语言创建单独实例。针对你遇到的根目录缺少默认index.html导致部署失败的问题，以下是可行的解决方案：

方案一：添加根目录语言选择页 #

通过创建静态语言选择页面作为根入口，同时保留各语言子目录的独立应用：

1. 在项目根目录新建root-index.html，内容示例：

<!DOCTYPE html>
<html>
<head>
    <title>选择语言</title>
</head>
<body>
    <h1>请选择语言</h1>
    <a href="/en/">English</a> | <a href="/fr/">Français</a> | <a href="/de/">Deutsch</a>
</body>
</html>

2. 修改angular.json的assets配置，将该文件复制到构建后的根目录：

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "root-index.html",
    "input": ".",
    "output": "./",
    "ignore": []
  }
]

3. 执行构建命令：ng build --configuration production --localize，此时dist/app-name根目录会生成root-index.html，各语言子目录保留各自的index.html。
4. 进入Azure静态Web应用的配置页面，在默认文档列表中添加root-index.html并设为优先项。

方案二：指定默认语言目录，配合路由重写 #

直接将某一语言设为默认访问路径，通过路由配置支持其他语言访问：

1. 在Azure静态Web应用的部署配置中，将应用工件位置设置为dist/app-name/en（以英文作为默认语言，可根据需求修改）。
2. 在项目根目录创建staticwebapp.config.json，添加路由规则：

{
  "routes": [
    {
      "route": "/fr/*",
      "serve": "/fr/{rest}"
    },
    {
      "route": "/de/*",
      "serve": "/de/{rest}"
    },
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ],
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
  }
}

3. 修改angular.json的assets配置，确保该配置文件被复制到构建目录：

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "staticwebapp.config.json",
    "input": ".",
    "output": "./"
  }
]

4. 执行构建命令后部署，Azure会默认加载en目录的应用，同时/fr/、/de/路径可正常访问对应语言版本。

方案三：构建后复制默认语言的index.html到根目录 #

解决你之前构建后脚本路径问题，通过Node.js脚本跨环境复制文件：

1. 在项目根目录新建post-build.js脚本：

const fs = require('fs');
const path = require('path');

// 复制默认语言（此处为en）的index.html到根目录
const source = path.join(__dirname, 'dist', 'app-name', 'en', 'index.html');
const target = path.join(__dirname, 'dist', 'app-name', 'index.html');

fs.copyFileSync(source, target);

2. 修改package.json的脚本，自动执行构建后操作：

"scripts": {
  "build": "ng build --configuration production --localize",
  "postbuild": "node post-build.js"
}

3. 部署时Azure会自动执行postbuild脚本，确保dist/app-name根目录存在index.html，满足Azure的默认文档检查要求，同时各语言子目录保留完整应用。

选择建议 #

• 需要用户手动选择语言：方案一
• 希望指定某一语言为默认访问版本：方案二
• 最小化配置修改，快速解决部署失败问题：方案三

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