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

解決vue項目打包后提示圖片文件路徑錯誤的問題

 更新時間:2018年07月04日 11:04:54   作者:kirinlau  
這篇文章主要介紹了解決vue項目打包后提示圖片文件路徑錯誤的問題,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下

vue項目打包后在production模式下提示圖片 ‘404(not found),在dev環(huán)境下好好的,打包了就提示這個錯誤。這是為什么呢,以前第一次使用vue-cli構建項目的的時候只有兩個圖片文件,當時部署后報錯路徑問題, 當時的想法就是簡單粗暴,直接在build好的文件修改了文件路徑,再后來項目中遇到了一大堆靜態(tài)資源,修改路徑顯然是不行的,看了一下生成文件大概知道是文件目錄改變了,所以引用的路徑也要隨之改變,網(wǎng)上最簡單的方法是修改 ‘config/index.js'文件中的 build模塊:

// emplate for index.html
 index: path.resolve(__dirname, '../dist/index.html'),
 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: './',   

       將默認的改為上文這樣子,靜態(tài)文件目錄改為static,靜態(tài)路徑改為‘./',即相對路徑。 ok了?

 試了一下還是有404,當時想到的就是難道只能在組件data中以“require”的方式一個一個的引入了嗎? 這個屬于js中以模塊引入方式確實可行,但是太繁瑣,想一下,使用這張圖的時候在html文檔結構中以 “:bind”的方式將資源以code的方式加在html文檔中,不是說這樣不行,這樣也是可以實現(xiàn)想要的效果的,但是這樣做會導致不僅文檔結構不清晰,冗余度高,維護起來麻煩,而且資源很多的時候這是一項龐大且繁瑣的工作,徒增加無用功。

這樣第三種方法應用而生,就是修改‘build'目錄下的utils.js文件,將文件中的“generateLoaders”函數(shù)改為:

pluginfunction generateLoaders (loader, loaderOptions) {
  const loaders = options.usePostCSS ?
   [cssLoader,   postcssLoader] : [cssLoader]
  if (loader) {
   loaders.push({
    loader: loader + '-loader',
    options: Object.assign({}, loaderOptions, {
     sourceMap: options.sourceMap
    })
   })
  }
  // Extract CSS when that option is specified
  // (which is the case during production build)
  if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath:'../../'         //add
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }
 }

重點是if…else判斷中的那個”publicPath:'../../' ”

build一下,部署在服務端,ok可行,這樣就可以愉快的在style中使用圖片資源了。

總結

以上所述是小編給大家介紹的解決vue項目打包后提示圖片文件路徑錯誤的問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關文章

  • vue中使用svg-icon遇到的坑及解決

    vue中使用svg-icon遇到的坑及解決

    這篇文章主要介紹了vue中使用svg-icon遇到的坑及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • Vue學習筆記進階篇之vue-router安裝及使用方法

    Vue學習筆記進階篇之vue-router安裝及使用方法

    本篇文章主要介紹了Vue學習筆記進階篇之vue-router安裝及使用方法,具有一定的參考價值,有興趣的可以了解一下
    2017-07-07
  • vue中實現(xiàn)一個項目里兼容移動端和pc端

    vue中實現(xiàn)一個項目里兼容移動端和pc端

    這篇文章主要介紹了vue中實現(xiàn)一個項目里兼容移動端和pc端問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • vue如何添加數(shù)組頁面及時顯示

    vue如何添加數(shù)組頁面及時顯示

    這篇文章主要介紹了vue如何添加數(shù)組頁面及時顯示,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue 項目如何引入微信sdk接口的方法

    vue 項目如何引入微信sdk接口的方法

    本篇文章主要介紹了vue 項目如何引入微信sdk接口的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • vue里使用create,mounted調(diào)用方法的正確姿勢說明

    vue里使用create,mounted調(diào)用方法的正確姿勢說明

    這篇文章主要介紹了vue里使用create,mounted調(diào)用方法的正確姿勢,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue2.0全局組件之pdf詳解

    vue2.0全局組件之pdf詳解

    這篇文章主要為大家詳細紹了vue2.0全局組件之pdf的相關資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • vue-cli3使用mock數(shù)據(jù)的方法分析

    vue-cli3使用mock數(shù)據(jù)的方法分析

    這篇文章主要介紹了vue-cli3使用mock數(shù)據(jù)的方法,結合實例形式分析了vue-cli3使用mock數(shù)據(jù)的相關實現(xiàn)方法與操作注意事項,需要的朋友可以參考下
    2020-03-03
  • 開啟Vue項目缺少node_models包的問題及解決

    開啟Vue項目缺少node_models包的問題及解決

    這篇文章主要介紹了開啟Vue項目缺少node_models包的問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • vue3表單輸入綁定方式

    vue3表單輸入綁定方式

    這篇文章主要介紹了vue3表單輸入綁定方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-07-07

最新評論