新聞中心
這篇文章主要為大家展示了“如何解決vue-cli webpack打包后加載資源的路徑問題”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何解決vue-cli webpack打包后加載資源的路徑問題”這篇文章吧。
vue項(xiàng)目,訪問打包后的項(xiàng)目,輸入路徑后,頁面加載空白。這時(shí)會(huì)有兩類問題,都是路徑問題。
1.一個(gè)是css,js,ico等文件加載不到,是目錄里少了dist
打開頁面時(shí)一片空白
解決辦法:
config/index.js文件的build->assetsPublicPath的默認(rèn)值改為 './'
assetsPublicPath:資源的根目錄。這個(gè)是通過http服務(wù)器運(yùn)行的url路徑。因?yàn)閣ebapp和static中間還有層dist,所以要用'./'
2.另一個(gè)就是單純的在背景圖使用相對(duì)路徑導(dǎo)致加載不到圖片
例如登錄頁面的背景圖設(shè)置
我的目錄結(jié)構(gòu)是這樣的,
頁的時(shí)候沒發(fā)使用@/../static 只能使用../../../static
這個(gè)時(shí)候,打包過后的登陸頁面引用圖片路徑錯(cuò)誤,多了一個(gè)/static/css
解決辦法:
build/utils.js文件的ExtractTextPlugin.extract=>新增 publicPath:"../../"
publicPath:重寫該加載器(loader) css 的 publicPath 的設(shè)置
以上是“如何解決vue-cli webpack打包后加載資源的路徑問題”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
名稱欄目:如何解決vue-cliwebpack打包后加載資源的路徑問題-創(chuàng)新互聯(lián)
瀏覽地址:http://fisionsoft.com.cn/article/dpihep.html