vue打包css文件中背景圖片的路徑問題

vue-cli寫完的靜態頁面咱們在node環境中引入沒有問題，可是打包後放在Apache環境下，路徑卻有問題了

如一個簡單css語句

.all_bg {
  background: url(../images/all_bg.png) 0 0 no-repeat;
  display: inline-block;
  overflow: hidden;
  background-size: 200px 300px;
}

可是打包後路徑成了卻出現404訪問不到的問題。

 

解決的辦法很簡單

build路徑下utils.js文件

// 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:'../../'            //添加此代碼解決css樣式中背景圖片路徑問題
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }