You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Angular升级至20后本地localhost环境图片无法加载,请求路径异常指向/.angular/vite-root/的问题求助

Angular升级至20后本地localhost环境图片无法加载,请求路径异常指向/.angular/vite-root/的问题求助

大家好,我遇到了一个特别头疼的问题,想请各位大佬帮忙分析分析:

之前我用Angular 14的时候,本地localhost运行项目时图片加载完全正常,所有图片都存在项目根目录下的src/assets文件夹里。

一个月前,我严格按照官方步骤,一步步从Angular 15升级到了最新的20.0.3版本,同时把所有依赖也都更新到了对应最新版本,Node环境用的是24.2.0。现在项目部署到生产环境后一切正常,QA测试全过,线上运行完全没问题,但本地localhost跑项目的时候,图片就是加载不出来。

我用SystemInternals Process Monitor排查了一下请求路径,发现浏览器找图片的时候,居然在请求/.angular/vite-root/{ProjectName}/Assets/{imageName}这个路径。可我从来没主动安装过Vite啊,package.json里根本没有Vite的依赖项,只有package-lock.json里能看到v6.3.5的版本记录。完全搞不懂为什么本地环境会突然把图片请求指向这个文件夹。

我也尝试过一些办法,但都没解决:

  • 试着手动安装了Vite,结果反而出现403错误,提示文件从项目外部的文件夹被加载,而且就算装了Vite,图片请求还是指向.angular文件夹
  • 后来我回滚到安装Vite之前的提交状态(不过package-lock.json里还是保留了Vite的记录),问题依旧存在
  • 我翻了好多相关的帖子,都没找到匹配的解决方案,现在完全不知道该从哪里下手排查了

下面是我的angular.json配置内容:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "projects": {
    "Project": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "preserveSymlinks": true,
            "allowedCommonJsDependencies": [
              "lodash",
              "odometer",
              "oidc-client"
            ],
            "index": "src/index.html",
            "polyfills": [
              "src/polyfills.ts"
            ],
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets/",
                "output": "/assets/"
              },
              {
                "glob": "**/*",
                "input": "src/Media/",
                "output": "/Media/",
                "followSymlinks": true
              }
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "./node_modules/@pqina/flip/dist/flip.min.css",
              "./src/styles.css"
            ],
            "scripts": [
              "./src/assets/scripts/wow.js",
              "./node_modules/@pqina/flip/dist/flip.js",
              "./src/assets/scripts/usmap.js"
            ],
            "extractLicenses": false,
            "sourceMap": true,
            "optimization": true,
            "namedChunks": true
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "20kb"
                }
              ],
              "assets": [
                "src/favicon.ico",
                "src/assets",
                "src/web.config"
              ],
              "styles": [
                "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
                "./node_modules/@pqina/flip/dist/flip.min.css",
                "./src/styles.css"
              ],
              "scripts": [
                "./src/assets/scripts/wow.js",
                "./node_modules/@pqina/flip/dist/flip.js",
                "./src/assets/scripts/usmap.js"
              ],
              "index": "src/index.html",
              "outputHashing": "all",
              "sourceMap": {
                "hidden": true,
                "scripts": true,
                "styles": true
              },
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "Project:build:production"
            }
          }
        }
      }
    }
  }
}

有没有大佬能给点思路,我应该从哪些方面继续排查或者调整配置呢?

内容来源于stack exchange

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.08 14:28:08