vue-cli || webpack 打包的时候css里面写的背景图片的路径出错问题

.bg
    width 100%
    position fixed
    left 0
    top 0
    height 100vh
    z-index -1
    background url('~@/assets/imgs/bg9.jpg') center no-repeat // 这个背景图片
    background-size cover
    filter blur(4px)

　打包生成后的地址：

.login .bg[data-v-c3a977bc] {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: -1;
    background: url(img/bg9.32c9a00.jpg) 50% no-repeat; // 这个地址就会变成 。。。。前面的绝对地址 + css + img/bg9.32c9a00.jpg，变成在css目录下找img了

 background-size: cover; filter: blur(4px); }

由于webpack打包图片会设置一个最大的图片大小，超过这个图片大小，就不会转化成base64的，还是直接转换成图片：

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

所以之前打包的时候没有问题因为我的图片大小是可以转换成base64的，坐下面设置就可以找到：

 assetsPublicPath: './'

现在需要更改build文件夹下面的util.js:

 if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../',  // 这个地方是我新加的，让css里面找路径都往上再找一级
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

 

转载于:https://www.cnblogs.com/chun321/p/10185461.html