javascript - vue里引用的圖片 部署到服務器加載失敗
問題描述
目錄結構:
代碼:
<img src='http://m.4tl426be.cn/wenda/title.png' />
在本地服務器運行可以正常加載, 但是放到服務器(tomcat)上就無法加載, 項目部署在webapp/myproject/目錄,在服務器應該請求的圖片路徑是http://1.1.1.1:8080/myproject...但是實際請求的圖片路徑是http://1.1.1.1:8080/static/im...請問如何在vue里把圖片路徑寫成當前目錄而不是服務器根目錄
問題解答
回答1:這個問題我之前遇到過,已經整理成文檔,你需要修改的是webpack配置,然后重新打包就可
回答2:剛好這個我也遇到過,放在服務器時此時的圖片路徑應該是絕對路徑,在本地時就按<img src='http://m.4tl426be.cn/wenda/title.png' />路徑,在服務器時就是<img src='http://m.4tl426be.cn/myproject/static/img/title.45ae5f4.png' />。當然上面的方法更加好
回答3:你如果用的腳手架,請熟悉下config里面幾個JS的用途,尤其是index.js
build: {env: require(’./prod.env’),index: path.resolve(__dirname, ’../dist/index.html’),assetsRoot: path.resolve(__dirname, ’../dist’),assetsSubDirectory: ’static’, // 附件資源引用子目錄assetsPublicPath: ’項目正式地址’, // 服務器資源引用根目錄productionSourceMap: true, }
相關文章: