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:;

    top:;

    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)

    }

巴特西

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

最新文章

热门文章