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中进行配置(这个要研究一下才能进行)

  • 相关阅读:
    python3安装crypto出错,及解决方法
    php中的引用
    算法
    HTTP协议
    jdk 1.8 InvocationHandler 中文注释
    Java实现多线程的几种方法
    shell编写显示ps相关脚本
    逆波兰表达式求值(后序表达式)
    155. 最小栈(leetcode简单题)
    字符串逆序
  • 原文地址:https://www.cnblogs.com/shapaozi/p/9552461.html
Copyright © 2011-2022 走看看