Vite构建中如何使用公共目录

Question

在我使用 Vite ( ) 的项目中，我的目录中^2.9.7有一个文件夹，其中包含一些图像。publicroot

我正在使用Vite的功能导入图像import.meta.glob，例如

import { LazyBlock } from "../LazyBlock";

const images = import.meta.glob("./home/*.(jpg|png|jpeg)");

export function Gallery() {
  const blockImages = Object.keys(images);

  return (
    <div className="flex justify-center w-full">
      <div className="flex flex-wrap justify-center min-h-8">
        {blockImages.map((image, index) => (
          <LazyBlock url={image} key={index} />
        ))}
      </div>
    </div>
  );
}

在本地主机中运行时，它工作正常，但有一个恼人的警告说要删除/public：

files in the public directory are served at the root path.
Instead of /public/home/1.png, use /home/1.png.

但是删除它，图像就会停止工作。

但主要问题是当我构建和部署项目时，public文件夹停止存在并且使用的路由停止工作，但如果更改 devtools 中的 src 路径，它就可以工作......

我缺少一些配置吗？

Answer 1

您不能使用，Object.keys()因为它始终返回绝对路径。而是使用Object.values().

您可以传递{eager: true,import: 'default'}Glob Import 的第二个参数，以便返回值只是资产的公共 URL。

您的代码将如下所示。

import { LazyBlock } from "../LazyBlock";

const images = import.meta.glob("./home/*.(jpg|png|jpeg)", {eager: true,import: 'default'});

export function Gallery() {
  const blockImages = Object.values(images);

  return (
    <div className="flex justify-center w-full">
      <div className="flex flex-wrap justify-center min-h-8">
        {blockImages.map((image, index) => (
          <LazyBlock url={image} key={index} />
        ))}
      </div>
    </div>
  );
}