构建后未找到 Angular 11 资产

编程问答 2022-05-28

问题描述

我的 Angular 应用中的资产文件夹有问题 - 构建应用后，找不到资产。

我的 index.html 文件：

<!doctype html>
<html lang="en">
<head>
  <Meta charset="utf-8">
  <title>CodigitalExternal</title>
  <base href="./">
  <Meta name="viewport" content="width=device-width,initial-scale=1">  
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

我的 angular.json 文件：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {
    "MyApp": {
      "projectType": "application","schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },"@schematics/angular:application": {
          "strict": true
        }
      },"root": "","sourceRoot": "src","prefix": "app","architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser","options": {
            "outputPath": "dist","deployUrl": "dist/","index": "src/index.html","main": "src/main.ts","polyfills": "src/polyfills.ts","tsConfig": "tsconfig.app.json","aot": true,"assets": [
              "src/favicon.ico","src/assets"
            ],"styles": [
              "src/styles/styles.scss"
            ],"scripts": []
          },"configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"
                }
              ],"optimization": true,"outputHashing": "all","sourceMap": false,"namedChunks": false,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true,"budgets": [
                {
                  "type": "initial","maximumWarning": "500kb","maximumError": "1mb"
                },{
                  "type": "anyComponentStyle","maximumWarning": "2kb","maximumError": "4kb"
                }
              ]
            }
          }
        },"serve": {
          "builder": "@angular-devkit/build-angular:dev-server","options": {
            "browserTarget": "MyApp:build","deployUrl": "/"
          },"configurations": {
            "production": {
              "browserTarget": "MyApp:build:production"
            }
          }
        }
      }
    }
  },"defaultProject": "MyApp"
}

由于构建选项中的 "deployUrl": "dist/"，我必须在服务选项中将其更改为 "/"。

然后，我可以加载我的图像：

<img src="/assets/icons/closeX-circle.blue.24x24.svg" />

在 localhost 上一切正常，但是在构建并部署到服务器后，找不到资产。我发现的工作资产的一种解决方案是通过在 src 中添加 dist 前缀来更改路径，如下所示：

<img src="dist/assets/icons/closeX-circle.blue.24x24.svg" />

但是，资产在本地主机上不起作用。我知道我的配置有问题，但我不知道是什么。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularassetsassetsassetshtmlhttp-status-code-404