vue+webpack項目打包后背景圖片加載不出來問題解決

在做VUE +的WebPack腳手架項目打包完成后，在IIS服務器上運行發現項目中的背景圖片加載不出來檢查項目代碼發現是因為CSS文件中，背景圖片引用的路徑問題;后來通過修改配置文件，問題終於解決了，解決方法如下：

注意：如果整體為空白，記得先改===》》》

1、記得改一下config下面的index.js中bulid模塊導出的路徑。因為index.html里邊的內容都是通過script標簽引入的，而你的路徑不對，打開肯定是空白的。先看一下默認的路徑。

 

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true,

 

1.修改資源路徑
在VUE +的WebPack項目中，項目打包后的CSS和JS的引用路徑是絕對路徑，項目部署后會將靜態當成根目錄，就造成了文件引用路徑的錯誤，解決方法是通過修改配置文件，將絕對路徑改為相對路徑。

具體操作如下：

1.打開webpack.prod.conf.js；

2.在output模塊中添加  publicPath: './' ，如下圖所示：

 

 

2.修改打包后背景圖片的引用路徑
資源內的圖片是通過css加載的，CSS代碼如：background：url（../ assets / img-bg / buttonbg.png）no-repeat;

但是打包過后的CSS變成了背景：url（../../ static / img / buttonbg.68979b3.png）no-repeat;我們需要修改配置文件，是的CSS代碼打包后，資源引用路徑還是相對路徑;

解決辦法：

1.打開build文件夾下的utils.js ;

2.在下圖位置添加  publicPath：” ../../

 

 

一：配置問題

當我們將項目打包為生產環境后，在dist文件夾下打開index.html，會發現頁面為白色。

1：打開config>index.js

2：在build對象找到assetsPublicPath，值改為‘./’

通過以上配置，問題完美解決;