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)
    }
  }

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

解決思路

首先覺得是圖片不能引入

• 由於在 'npm run dev' 中可使用, 因此能夠排除這種錯誤.

認爲是本身的某一個配置項出了問題

• 問了問一些大神, 沒有看到任何有錯的地方,
• 最爲詭異的是 dev可行, 我就把全部精力都放到了, 在config文件夾中 index.js 中的 build 裏面的配置.
• 走了不少彎路.
• 最後肯定, 這個裏面沒有能改的.

肯定是配置項出了問題.

• 也是由於在dev中可行,
• 又由於添加了<img>標籤後, 是能夠讀取圖片的.
• 慢慢就肯定了, 是在打包的時候, 咱們用的相對路徑.而在dev的時候, 用的是絕對路徑.

肯定問題緣由

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

一通查

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