欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue webpack build資源相對路徑的問題及解決方法

 更新時間：2020年06月04日 10:20:44   作者：lewxiaolu  
這篇文章主要介紹了vue webpack build資源相對路徑的問題，本文通過實(shí)例代碼給大家介紹的非常詳細(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)管理的實(shí)現(xiàn)

    Vue詳細(xì)講解Vuex狀態(tài)管理的實(shí)現(xiàn)

    這篇文章主要介紹了Vuex狀態(tài)管理器的使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-08-08
  • vue axios調(diào)用接口方法報錯500 internal server error的兩種解決方法

    vue axios調(diào)用接口方法報錯500 internal server err

    前端使用axios 訪問后端接口時報錯,在瀏覽器中點(diǎn)擊紅色的報錯數(shù)據(jù),本文給大家分享vue axios調(diào)用接口方法報錯500 internal server error的兩種解決方法,感興趣的朋友一起看看吧
    2023-10-10
  • 一文搞懂vue中provide和inject實(shí)現(xiàn)原理對抗平庸

    一文搞懂vue中provide和inject實(shí)現(xiàn)原理對抗平庸

    這篇文章主要為大家介紹了vue中provide和inject實(shí)現(xiàn)原理的深入理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-04-04
  • vue異步組件使用及加載失敗異常處理

    vue異步組件使用及加載失敗異常處理

    在構(gòu)建大型單頁應(yīng)用時,組件的按需加載和延遲加載對于性能優(yōu)化至關(guān)重要,本文主要介紹了vue異步組件使用及加載失敗異常處理,具有一定的參考價值,感興趣的可以了解一下
    2024-02-02
  • 詳解如何創(chuàng)建基于vite的vue項目

    詳解如何創(chuàng)建基于vite的vue項目

    vite 這個是尤大開發(fā)的新工具,目的是以后替代webpack,下面這篇文章主要給大家介紹了關(guān)于如何創(chuàng)建基于vite的vue項目的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2023-11-11
  • vite打包出現(xiàn)?"default"?is?not?exported?by?"node_modules/...問題解決辦法

    vite打包出現(xiàn)?"default"?is?not?exported?by?"

    這篇文章主要給大家介紹了關(guān)于vite打包出現(xiàn)?"default"?is?not?exported?by?"node_modules/...問題的解決辦法,文中通過代碼將解決的辦法介紹的非常詳細(xì),對同樣遇到這個問題的朋友具有一定的參考借鑒價值,需要的朋友可以參考下
    2024-06-06
  • Vue強(qiáng)制組件重新渲染的方法討論

    Vue強(qiáng)制組件重新渲染的方法討論

    這篇文章給大家詳細(xì)介紹了Vue強(qiáng)制組件重新渲染的正確方法,非常的實(shí)用,有需要的小伙伴可以參考下
    2020-02-02
  • vue組件通信傳值操作示例

    vue組件通信傳值操作示例

    這篇文章主要介紹了vue組件通信傳值操作,結(jié)合實(shí)例形式分析了vue.js父子組件通信及兄弟組件通信相關(guān)操作技巧,需要的朋友可以參考下
    2019-01-01
  • 如何修改Vue項目運(yùn)行的IP和端口

    如何修改Vue項目運(yùn)行的IP和端口

    這篇文章主要介紹了修改Vue項目運(yùn)行的IP和端口的方法，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-02-02
  • Vue-cli@3.0 插件系統(tǒng)簡析

    Vue-cli@3.0 插件系統(tǒng)簡析

    Vue-cli@3.0 是一個全新的 Vue 項目腳手架。這篇文章主要介紹了Vue-cli@3.0 插件系統(tǒng)簡析,需要的朋友可以參考下
    2018-09-09

最新評論