如何构建单语言版Angular i18n本地化应用并设置源语言baseHref

针对你遇到的部署问题，下面逐一给出解决方案：

1. 将源语言版本构建到根目录，本地化版本放在子目录 #

可以通过修改angular.json的i18n配置实现：

• 把sourceLocale设为你的源语言"de"
• 在locales里为英文版本指定baseHref为"/en/"

示例配置如下：

"i18n": {
    "sourceLocale": "de",
    "locales": {
        "en": {
            "translation": "src/i18n/messages.en.xlf",
            "baseHref": "/en/"
        }
    }
}

执行本地化构建命令：

ng build --localize

构建完成后，dist目录结构会变成：

• dist/（根目录下是德语版本，index.html的base href为"/"）
• dist/en/（英文版本，base href为"/en/"）

直接把dist下的所有内容部署到服务器根目录即可，德语版本自动对应根路径，英文版本通过/en/访问。

2. 仅构建单语言版本到根目录 #

有两种实现方式：

方式一：命令行直接指定语言 #

执行带--locale参数的构建命令：

ng build --localize --locale de

这只会构建德语版本，输出到dist根目录，index.html的base href默认是"/"。

方式二：在angular.json中配置专属构建选项 #

在build的configurations里新增德语专属配置：

"build": {
  "configurations": {
    // 其他配置...
    "de": {
      "localize": ["de"]
    }
  }
}

之后用以下命令构建：

ng build --configuration de

关于源语言指定baseHref的问题 #

Angular中，源语言的baseHref不需要在i18n.locales里配置，可通过以下两种方式设置：

1. 全局配置：在angular.json的build.options里设置：

"build": {
  "options": {
    "baseHref": "/",
    // 其他选项...
  }
}

2. 命令行参数：构建时通过--base-href指定：

ng build --localize --base-href "/"

两种方式都会让源语言版本的index.html中base href设为"/"，适配服务器根目录部署。

未来英文版本单独域名的适配 #

当你为英文版本单独注册域名后，只需单独构建英文版本并指定baseHref为根路径：

ng build --localize --locale en --base-href "/"

把构建产物部署到英文域名的服务器根目录，即可脱离子目录结构。

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