vue3 组件内使用路径

最新推荐文章于 2025-08-07 15:50:55 发布

原创最新推荐文章于 2025-08-07 15:50:55 发布 · 968 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

笔记同时被 3 个专栏收录

7 篇文章

订阅专栏

6 篇文章

订阅专栏

vue

4 篇文章

订阅专栏

本文介绍了在Vite构建过程中遇到的组件路径不被编译的问题，以及如何通过动态导入（import.meta.glob）来解决。在Vue组件中，作者展示了如何在`onMounted`钩子中异步加载图片资源，并利用`useAttrs`获取属性。文章还包含了完整的模板、脚本和样式代码，为Vite项目中处理静态资源提供了一种实践方案。

使用vite打包时不能将组件的路径进行编译。通过modules解决

<template>
  <div class="t-img" v-bind="attr">
    <img :src="src?.default" alt="" />
  </div>
</template>

<script lang="ts" setup>
import { defineProps, useAttrs,  ref, onMounted } from "vue";
import type { PropType } from "vue";
const props = defineProps({
  src: {
    type: String as PropType<string>,
    require: true,
    default: "",
  },
});
const modules = import.meta.glob("/src/assets/img/*.png");
const src = ref<any>();
onMounted(async () => {
  src.value = await modules[props.src]();
});
const attr = useAttrs();
</script>

<style lang="scss" scoped>
.t-img {
  position: relative;
  img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
  }
}
</style>