Angular 无法使用 nginx 在服务器上正确加载图像

Question

所以我有 3 个不同的角度项目，pj1、pj2 和 pj3 我正在尝试使用 nginx 部署。目标是有如下路线：

  www.mysite.com/     ---> loads the pj1
  www.mysite.com/pj2  ---> loads the pj2
  www.mysite.com/pj3  ---> loads the pj3

文件夹结构

文件夹结构如下：

• 我的项目
  • pj1
  • pj2
  • pj3

Nginx 配置

我的 nginx 配置文件是这样的：

server {
root /usr/share/nginx/my-projects;

location /pj1/ {
    autoindex on;
    try_files $uri$args $uri$args/ /pj1/index.html;
}

location /pj2/ {
    autoindex on;
    try_files $uri$args $uri$args/ /pj2/index.html;
}

location /pj3/ {
    autoindex on;
    try_files $uri$args $uri$args/ /pj3/index.html;
}

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

}

Angular 构建配置

我正在使用以下命令构建每个项目：

ng build --prod --aot=true --buildOptimizer=true --base-href /pj1/ --deploy-url /pj1/

这里以构建pj1项目为例，其他的遵循相同的模式。

问题：角度图像

html里面的图片是这样的，例如：

 <img src="assets/img1.jpg" />

它在服务器和本地都正确加载。 但是，scss 文件中引用的图像仅在服务器上或本地加载，具体取决于我如何定义它们的路径。 例如，这条路径在我的本地机器上完美运行，但在服务器上却不行：

background-image: url(/assets/img1.svg);

当我更改为以下路径时，我在 cli 上收到一个错误，说它无法加载资源：

background-image: url(assets/img1.svg);

虽然如果我在服务器上运行时将它手动放入浏览器的检查器中，它会起作用。所以它可以在服务器上运行，但不能在本地运行。

我不知道到底是什么导致了这个问题，也许 angular 没有引用正确的根，因为只有当我把“/”放在路径的开头时它才会出错，但是如果我不放这个然后它在我的本地机器上不起作用。有什么解决办法吗？在本地机器和服务器上都可以运行的东西？

Answer 1

我找到了解决方案！ 问题的发生是由于 angular 处理 css 文件中图像路径的奇怪方式，如 this answer here

中所述

所以对我有用的是让路径成为绝对路径，如下例所示：

background-image: url(/assets/img1.svg);

并将以下代码添加到我的 angular.json 文件中：

"build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
       ...
       "rebaseRootRelativeCssUrls": true

这使得 Angular 更改文件夹资产将要被搜索的根目录，因此不是在 www.mysite.com/assets/ 上搜索我的项目之一的图像，而是搜索在 www.mysite.com/pj1/assets/ 上，这实际上正是我所需要的。