分类目录归档:Html5

Vue+Webpack打包后background-image无法正常显示

1、背景:正常情况下打包后的页面都是基于在网站根目录下运行,原则上不会出现这种情况,但如果项目放在网站的二级目录或本地运行(官方不建议本地运行项目,可能涉及到网络请求的问题)
2、基于项目在二级目录下运行,即打开时需要输入http://xxx.xxx.xxx/xxx,而不是直接http://xxx.xxx.xxx这种
3、二级目录下打包后的项目要能正常运行,需要在config/index.js中

build:{
   ....
   assetsPublicPath: '/'
   ....
}

修改成:assetsPublicPath: ‘./’
4、问题来了,因为是相对路径,所以在css中写的url是相对当前这个css文件的,所以打包后的背景图片url如果为static/img/xxx.jpg,结果解析出来的路径是xxxxx/static/css/static/img/xxx.jpg,图片当然无法正常显示了;
5、也许有些人会发现,为什么有些图片是正常的?好像并不是都不行啊,注意了,那些没有问题的图片看下路径是不是加载的base64格式?!
6、在webpack.base.conf.js中会有这么一段

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

这里的意思是说,小于10K的图片资源会在打包时直接转成base64,你可以把这个值放大,大于你的背景图,这样也可以解决
7、还有另外一个办法,在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'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

修改成:

    // 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: '../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

只是加了一行publicPath: ‘../../’,这样一来样式文件会相对于根目录加载,这种方式也是有局限性的,为什么可以写两个../就行了呢?因为我们的img与css都是放在static目录下的二级目录,所以两个../刚好到static同级,如果不是则会出错的哦,注意就行!

参考链接:https://segmentfault.com/q/1010000009700735