vue webpack build資源相對路徑的問題及解決方法
更新時間：2020年06月04日 10:20:44 作者：lewxiaolu
這篇文章主要介紹了vue webpack build資源相對路徑的問題，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
默認(rèn)情況webpack+vue-cli打包的css、js等靜態(tài)資源路徑都是絕對的，即static在根目錄下，如果部署到帶有文件夾目錄的項目中，資源路徑就會出錯。
如圖：
解決方法:
在webpack.prod.conf.js中，output中添加或者修改為 publicPath: ‘./'；
output: {
publicPath: './',
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
這是修改了js，css引用地址，那么image引用地址呢？
config文件夾下面的index
build: {
// Template for index.html
index: path.resolve(__dirname, '../monitor01/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../monitor01'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
...
}
更改圖片地址也為相對路徑，修改build下，utils.js文件.
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
總結(jié)
到此這篇關(guān)于vue webpack build資源相對路徑的問題及解決方法的文章就介紹到這了,更多相關(guān)vue webpack build資源相對路徑內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue詳細(xì)講解Vuex狀態(tài)管理的實現(xiàn)
這篇文章主要介紹了Vuex狀態(tài)管理器的使用,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
vue axios調(diào)用接口方法報錯500 internal server err
前端使用axios 訪問后端接口時報錯,在瀏覽器中點擊紅色的報錯數(shù)據(jù),本文給大家分享vue axios調(diào)用接口方法報錯500 internal server error的兩種解決方法,感興趣的朋友一起看看吧2023-10-10
一文搞懂vue中provide和inject實現(xiàn)原理對抗平庸
這篇文章主要為大家介紹了vue中provide和inject實現(xiàn)原理的深入理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
在構(gòu)建大型單頁應(yīng)用時,組件的按需加載和延遲加載對于性能優(yōu)化至關(guān)重要,本文主要介紹了vue異步組件使用及加載失敗異常處理,具有一定的參考價值,感興趣的可以了解一下2024-02-02
vite 這個是尤大開發(fā)的新工具,目的是以后替代webpack,下面這篇文章主要給大家介紹了關(guān)于如何創(chuàng)建基于vite的vue項目的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
vite打包出現(xiàn)?"default"?is?not?exported?by?"
這篇文章主要給大家介紹了關(guān)于vite打包出現(xiàn)?"default"?is?not?exported?by?"node_modules/...問題的解決辦法,文中通過代碼將解決的辦法介紹的非常詳細(xì),對同樣遇到這個問題的朋友具有一定的參考借鑒價值,需要的朋友可以參考下2024-06-06
這篇文章給大家詳細(xì)介紹了Vue強(qiáng)制組件重新渲染的正確方法,非常的實用,有需要的小伙伴可以參考下2020-02-02
這篇文章主要介紹了vue組件通信傳值操作,結(jié)合實例形式分析了vue.js父子組件通信及兄弟組件通信相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了修改Vue項目運(yùn)行的IP和端口的方法，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-02-02
Vue-cli@3.0 是一個全新的 Vue 項目腳手架。這篇文章主要介紹了Vue-cli@3.0 插件系統(tǒng)簡析,需要的朋友可以參考下2018-09-09