vue項目打包部署服務器后無法訪問背景圖片問題處理方法

如果項目原來運行正常，只是添加了背景圖之后背景圖片無法正常顯示，那么可以先查看元素，看下背景圖片路徑變成什么樣了。

一般應該是如下這樣：

http://xxxx.com/static/css/static/img/xxx.jpg

這就造成了圖片路徑錯誤而無法正常加載，這個就需要對打包配置項進行調整了，如下：

//build/utils.js
    ......
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'
      })
    }
    ......
  }

即添加 publicPath:'../../' 即可。

另外，打包之后，在本地直接訪問index.html文件，添加了背景圖片的頁面如果可以直接訪問，那么這個背景圖片應該就可以直接展示了：