Angular Universal中能否为styles文件添加绝对路径/域名？

当然可以实现！下面几种方法都能帮你把样式文件的引用改成带完整域名的绝对路径，完美适配Angular Universal场景：

方法1：构建时通过命令行参数指定 #

这是最直接的临时方案，执行构建命令时加上--deploy-url参数即可：

ng build --prod --deploy-url=https://www.domainname.com/

执行后，生成的index.html里的所有静态资源（包括样式、脚本、图片）都会自动带上你指定的域名前缀，比如你提到的样式标签会变成：

<link rel="stylesheet" href="https://www.domainname.com/styles.78f022854070df211b2d.css">

方法2：修改angular.json配置（永久生效） #

如果不想每次构建都手动输入参数，直接修改项目根目录的angular.json文件，找到对应项目的build配置项，在options里添加deployUrl字段：

"projects": {
  "你的项目名称": {
    "architect": {
      "build": {
        "options": {
          // 保留原有其他配置
          "deployUrl": "https://www.domainname.com/",
          // 保留原有其他配置
        }
      },
      // Universal的server构建无需额外修改，会复用客户端构建的资源路径配置
      "server": {
        // ... 原有配置
      }
    }
  }
}

以后不管是执行ng build还是Universal的构建命令，都会自动应用这个域名前缀。

方法3：基于环境变量动态配置（多环境场景） #

如果你的项目有多个部署环境（测试/生产），可以通过环境变量来动态切换域名：

1. 在src/environments/environment.prod.ts中添加部署域名配置：

export const environment = {
  production: true,
  deployUrl: 'https://www.domainname.com/'
};

2. 修改angular.json，让构建时读取环境变量的deployUrl：

"projects": {
  "你的项目名称": {
    "architect": {
      "build": {
        "options": {
          // ... 原有配置
          "deployUrl": "",
        },
        "configurations": {
          "production": {
            "fileReplacements": [
              {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
              }
            ],
            "deployUrl": "${deployUrl}"
          }
        }
      }
    }
  }
}

这样不同环境构建时，只需要修改对应环境文件里的deployUrl即可。

注意事项 #

• 记得在deployUrl的末尾加上斜杠/，否则资源路径会拼接错误（比如变成https://www.domainname.comstyles.xxx.css）。
• Angular Universal的服务端渲染会复用客户端构建生成的index.html资源引用，所以以上配置对Universal完全生效，不需要额外修改服务端代码。

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