zoukankan      html  css  js  c++  java
  • Vue项目打包问题

    用vux初始化的一个项目中,做了轮播图和栏目菜单,都有用到img标签

    <ul class="mensul">
              <li>
                <a href="#">菜单1</a>
                <img  src="../assets/browser.png" alt="">
              </li>
              <li>
                <a href="#">菜单2</a>
                <img src="../assets/农业_1.png" alt="">
              </li>
              <li>
                <a href="#">菜单3</a>
                <img src="../assets/message.png" alt="">
              </li>
              <li>
                <a href="#">菜单4</a>
                <img src="../assets/video.png" alt="">     
              </li>
            </ul>

    全部的img标签都是访问本地的静态资源文件

    对项目进行打包部署测试

    “npm run build”

    生成的dist文件

    vs和src文件手动生成的(vs文件是用visual studio 当做微型服务器访问dist文件实现预览效果)

    build之前和build之后的静态文件(图片)对比

    发现问题:

      1:img文件如果小于10k会被直接build在项目中,不会被当做静态文件处理;

      2:变量中声明img路径,会被当做字符串处理;

      3:预览中,发现访问轮播图空白(访问路径错误,打包未被处理,不存在)

     处理方法:

      1:手动复制对应的文件粘贴到dist中,使访问不存在问题

      2:webpack中进行配置(这个要研究一下才能进行)

  • 相关阅读:
    实体机可以ping通虚拟机,虚拟机ping不通实体机
    实体机可以ping通虚拟机,虚拟机ping不通实体机
    eclipse快捷键
    eclipse快捷键
    利用信号捕捉函数回收子进程
    进程间通信_信号
    进程间通信_管道
    创建子进程
    系统编程入门
    JPG库移植与使用
  • 原文地址:https://www.cnblogs.com/shapaozi/p/9552461.html
Copyright © 2011-2022 走看看