PHP学习_PHP技术_PHP网站建设_PHP程序员专注于PHP技术研究及学习

Adophper » 前端设计 » vue背景图片报包不显示

vue背景图片报包不显示

此文被围观19日期: 2017-08-13 分类 : 前端设计  标签:  ····

vue的配置文件里面webpack.base.conf.js有这样一段代码:

{
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      }

vue意思是大于10KB的图片会转存到img文件夹下面,小于这个值的就会转成base64


但在页面中我们用的背景图片大于10KB,放在assets的images下面,css中写的是background-images: url("../assets/images/bg.jpg")

打包后背景图片不显示,加载路径有问题,这里我们需要修改vue配置文件util.js里面的:

ExtractTextPlugin.extract

在其中加入:

publicPath: '../'


vue打包后正常显示了背景图片


参考资料:

https://segmentfault.com/q/1010000010488410

https://segmentfault.com/a/1190000010224765


本站使用ThinkPHP框架开发读图网主题,目前托管在阿里云,图片由读图网提供. 蜀ICP备12031064号

Copyright © 2011-2017adophper.com All Rights Reserved.