zoukankan      html  css  js  c++  java
  • 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)
        }
  • 相关阅读:
    DDK 的一些笔记
    C# 32位程序访问64位系统注册表
    自己对设备栈的理解
    简单驱动编写与windbg调试
    DDK 的一些笔记other
    USB设备的一些概念
    C# 32位程序与64位程序读\写注册表的区别
    dbca建库时找不到ASM磁盘
    sf01_什么是数据结构
    cPickle.dump函数
  • 原文地址:https://www.cnblogs.com/chun321/p/10185461.html
Copyright © 2011-2022 走看看