javascript - vue裡引用的圖片 部署到伺服器載入失敗

Question

目錄結構:

程式碼:

<img src="./title.png" />

在本機伺服器運作可以正常載入,
但是放到伺服器(tomcat)上就無法載入, 專案部署在webapp/myproject/目錄,
在伺服器應該要求的圖片路徑是http:// 1.1.1.1:8080/myproject...
但是實際請求的圖片路徑是http://1.1.1.1:8080/static/im...
請問如何在vue裡把圖片路徑寫成目前目錄而不是伺服器根目錄

Answer 1

這個問題我之前遇到過，已經整理成文檔，你需要修改的是webpack配置，然後重新打包就可

Answer 2

剛好這個我也遇到過，放在伺服器時此時的圖片路徑應該是絕對路徑，在本地時就按路徑，在伺服器時就是。當然上面的方法比較好

Answer 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,
    }