生产部署之后Angular7的assets目录文件引用url错误的解决方法

某些页面需要放置一些静态图片，按照Angular目录结构，应该放到/src/assets目录下，例如有文件/src/assets/img/menu_a.svg，在页面的html模板中这样引用

<img src="/assets/img/menu_a.svg" alt="">

在本地测试(ng serve -o)中，在http://localhost:4200上可以正常显示图片。

但前端项目和后台整体打包部署到Tomcat后，发现图片不能正常显示。查看发现图片的链接为http://192.168.0.23:8085/assets/img/menu_a.svg，而Angular前端被放在路径http://192.168.0.23:8085/fr/上。图片路径应该是

http://192.168.0.23:8085/fr/assets/img/menu_a.svg

解决方法：

1.前端构建时设置参数 --baseHref

ng build --prod --outputHashing=all --outputPath=../public/dist --baseHref=/fr/ --build-optimizer

--baseHref会使ng创建index.html的时候，添加上base标签

<base href="/fr/">

因为Angular是单页模式，所以所有页面和组件都放置在index.html内，使用相同的基础路径。

2.把assets目录下的文件的url改为./assets，如

<img src="./assets/img/menu_a.svg" alt="">

这样就可以正确显示图片。

发布于 13:10