vue 生产包 背景图片-background图片不显示

Posted shine-lovely

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 生产包 背景图片-background图片不显示相关的知识,希望对你有一定的参考价值。

vue生产包:

技术图片

css放在一个文件下,图片在img文件夹下

通常我们使用img标签引入文件,npm run build 打包后 ,因为img为html标签,打包后他的路径是由index.html开始访问的,他走static/img/‘图片名‘是能正确访问到图片的

而我们写在css background:url(../xxx/)引入的图片 ,这时打包后他的路径是从static/img/’图片名’是访问错误的,因为在css目录下并没有static目录。所以此时需要先回退两层到根节点处才可以正确获取到图片。

打开build/utils.js publicPath改为 publicPath:‘../../‘,

 

 

function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

    if (loader) {
      loaders.push({
        loader: loader + ‘-loader‘,
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath:‘../../‘,
        fallback: ‘vue-style-loader‘
      })
    } else {
      return [‘vue-style-loader‘].concat(loaders)
    }
  }

 

以上是关于vue 生产包 背景图片-background图片不显示的主要内容,如果未能解决你的问题,请参考以下文章

vue2压缩图片打包大小

vue2使用background-image设置背景图片不显示 解决

vue 背景图片 backgroundImage background-image vue的style方式绑定行内样式-background-image的方式等~

vue动态绑定background:url绑不上的问题

vue生产环境图片无法显示200

vue项目中打包background背景路径问题