Vue-cli 構建項目 的`.vue`組件中, scss中添加背景圖路徑問題

問題背景

• 每個項目都需要在css中用到背景圖.
• vue-cli項目是自動構建生成的, 等到這個項目做通了, 再來記錄整個工程目錄.
• 自動構建后的項目, 會有兩種運行方式.
  1. npm run dev: 這是自動提供的, 可以提供一個開發的環境, 保存, 自動熱更新.
  2. npm run build: 這是我們的構建項目, 構建成一個能夠運行的項目
• 構建后項目中所有的代碼都會被打包處理. 所有的代碼都會結合到一起, 這時候的路徑就全靠我們的自己提前配置的了.

問題描述

• 構建后的項目, 都需要讀取靜態資源.
• 靜態資源分為三種, JS, CSS, IMG.
• 因為我們需要生成到一個cordova項目中, 打包安卓. 故我們全部采用了相對路徑.
• 需要引入的資源只有三種, JS, CSS 和圖片. 圖片分為 <img src=""> 中引入的圖片, 和 background-image: url() 中引入的圖片.
• 在img中的圖片是完全正確的, 這時候, 我們css中的圖片怎么都找不到.
• 問題最尷尬的是: 在npm run dev的時候一切正常
• 附上 錯誤截圖,
• 

解決方法

一共找到了兩種種解決方法: 我直接用了第二種

第二種解決方法截圖:

• 改變了一配置項, 也就是向上走兩層, 剛剛好符合我的要求
• 因為是css中的圖片, 所以在路徑編程變成了去css這個文件夾中尋找static再去尋找img文件夾.
• 尷尬到不行...
• 在gihub的issue中看到的方法.
• 真是感謝, 感謝.
• 

方法具體步驟

1. 針對此問題, 需要單獨為css配置publicPath.
2. ExtractTextWebpackPlugin 提供了一個options.publicPath的API, 可以為css單獨配置publicPath.
3. 對於 vue-cli生成的項目, dist目錄結構為: dist > index.html + static > css + img + js
4. 問題是css中的background路徑不能正確引入.
5. 更改build/utils.js文件中的 ExtractTextPlugin 的 options配置.

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../', //注意: 此處根據路徑, 自動更改
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

6. 附上extract-text-webpack-plugin 的文檔

解決思路

首先以為是圖片不能引入

• 因為在 'npm run dev' 中可以使用, 所以可以排除這種錯誤.

認為是自己的某一個配置項出了問題

• 問了問一些大神, 沒有看到任何有錯的地方,
• 最為詭異的是 dev可行, 我就把所有精力都放到了, 在config文件夾中 index.js 中的 build 里面的配置.
• 走了很多彎路.
• 最后確定, 這個里面沒有能改的.

確定是配置項出了問題.

• 也是因為在dev中可行,
• 又因為添加了<img>標簽后, 是可以讀取圖片的.
• 慢慢就確定了, 是在打包的時候, 我們用的相對路徑.而在dev的時候, 用的是絕對路徑.

確定問題原因

• 根據問題所報錯, 發現尋找這個圖片時候, 路徑出了問題
• 和朋友商量后, 一致認定, 需要多加判斷, 看看是否為css中的圖片.
• 如果是的話, 就多一個判斷.
• 因為是webpack小白, 真是尷尬. 不知道哪里改.

一通查

• 看了很多的解決方法,
• 比如說, 打包完成后再改
• 還有更加暴力的轉成base64之類的.
• 最后在issue中看到了這個答案
• 一試便知, 真是贊.