阅读数:70 评论数:0

方法一、使用new URL

在 Vite 中，你可以使用 new URL 的方式来引用静态资源，这样 Vite 会处理资源的路径，并且在构建时会将资源复制到输出目录：

<script setup>
const imageUrl = new URL('./assets/image.png', import.meta.url).href;
</script>

<template>
  <img :src="imageUrl" alt="Description" />
</template>

这种方式的好处是 Vite 会自动优化图片资源，例如，将图片转换为 ESM 模块，或者在构建时进行哈希处理。

方法二、使用静态导入

<script setup>
import imageUrl from './assets/image.png';
</script>

<template>
  <img :src="imageUrl" alt="Description" />
</template>

在这种情况下，Vite 会将图片作为一个模块来处理，并且在构建时将其复制到输出目录。

最后确保vite.config.js 文件中正确配置了资源处理，这样在构建组件库时，资源可以被正确地处理和引用：

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'path/to/your/entry.js',
      name: 'YourLibraryName',
    },
    rollupOptions: {
      // 确保静态资源被正确处理
      output: {
        assetFileNames: 'assets/[name]-[hash][extname]',
      },
    },
  },
});