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
相关产品推荐
相关产品推荐

