vue：静态资源的动态访问

蓝色海岛
187 阅读2分钟

效果：切换tab时显示不同的图片

动画.gif

结构：

    <div class="wrapper">
      <div
        class="item"
        :class="{ active: active === n }"
        v-for="n of 3"
        :key="n"
        @click="handleTap(n)"
      >
        {{ n }}
      </div>
    </div>

    <div class="img-wrapper"></div>
    
    
<script setup>
import { ref } from 'vue'
const active = ref(1)

const handleTap = (n) => {
  active.value = n
}
</script>

<style lang="scss">
.wrapper {
  display: flex;
  justify-content: center;
  .item {
    width: 50px;
    line-height: 36px;
    border: 1px solid #ccc;
    text-align: center;
    cursor: pointer;
    &.active {
      background-color: deepskyblue;
      color: #fff;
    }
  }
}
.img-wrapper {
  width: 300px;
  height: 300px;
  background-image: url(./assets/3.jpg);
  background-size: cover;
}
</style>

在运行时的代码实际上是经过编译后的，路径会做一个转换： image.png

在vite中自动转换路径：

  1. css中的静态路径
  2. img中的src静态路径
  3. imoprt动态导入
  4. URL

当写成这样时，页面读取不到图片，因为这个路径是源码中的路径，不是打包后图片的路径，并且页面上会报404错误 image.png

解决办法：

思路：让style使用的路径变成打包之后的路径

第一种方式：依次导入所有的静态资源

image.png

优点：代码简单

缺点：代码过多，不够优雅

第二种方式：将src中的assets移动到public目录中

image.png

优点：抹平了源码和打包结果中路径的差异（public中的资源不会经过构建），可以实现功能，代码量小

缺点：丢失了文件指纹，在资源不会变化的情况下可以使用

第三种方式：使用import动态导入

image.png

优点：找到./assets/${n}.png这个路径中所有的png图片生成到dist中，会自带一个js文件，用于导入该图片再导出这个路径，可以动态导入静态资源

缺点：会造成很多个网络请求

参考：www.bilibili.com/video/BV16i…

如果你觉得这篇文章对你有用，可以看看作者封装的库xtt-utils，里面封装了非常实用的js方法。如果你也是vue开发者，那更好了，除了常用的api，还有大量的基于element-ui组件库二次封装的使用方法和自定义指令等，帮你提升开发效率。不定期更新，欢迎交流~

avatar
文章
阅读
粉丝