Vue 在npm run dev 的时候,图片背景等正常显示,npm run build后,报错,提示图片找不到。


原因: npm run dev 时候,加载资源是绝对路径

           npm run build 时候,加载资源是相对路径,且文件目录已改变。

 默认情况下为:


      index.html
      static
      | --img
          | --图片.jpg
      | --css
          | --app.css
      | --js

          | --app.js


打包后,不管原先的图片资源在哪里,路径通通变成static/img/xxxx ,若在HTML里的IMG标签的src引入图片,则正常显示,因为路径是从 index.html 开始寻找的,所以static/img/xxxx是能正确访问到图片。

 但是在css/app.css里,在当前的CSS目录下,无 static/img 路径,所以资源找不到。


解决办法:

 打开build / utils.js,在绿色位置加入 publicPath:'../../' ,(如果自己更改了打包时候的路径,请自行匹配)

 该设置会把css所有引入的资源的路径变成 ../../static/img/ ,这样就能找到资源了。

如下:

if( options.extract){ 

      return ExtractTextPlugin.extract({         

         use: loaders,

         fallback: 'vue-style-loader',

           publicPath:'../ ../'
      })
   } else {
      return ['vue-style-loader'].concat(loaders)
   }


Logo

前往低代码交流专区

更多推荐