生產部署以後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