使用 Vite 进行构建 - 获取（或路径）不起作用

Question

我有一个简单的客户端页面，是使用 Vite 用 React 制作的。

该项目在本地运行时运行良好 (

npm run dev

)，但运行

npm rum build

后，会创建一个

dist

文件夹，这就是我用于 Firebase 托管的文件夹。问题是，所有

fetch

（对于内部

.json

文件）和

src={}

都不起作用：

GET https://webpage.web.app/src/imgs/icons/icon.png 404 (Not Found)
GET https://webpage.web.app/src/data/items.json 404 (Not Found)

这是一个大问题，因为我需要像这样动态导入我的组件：

<img src={item.machineImg} alt="imgMachine" />

在脚本开头使用

import theThing from 'path/to/the/thing.json'

可以导入图像和 JSON。

这可能是构建时路径未正确转换的问题吗？或者我需要用 Vite 配置什么？

我的

vite.config.js

：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()]
});

我的结构

我尝试通过首先使用

<img src="/path/to/img.png" />

导入来更改尽可能多的

import theThing from 'path/to/the/thing.png'

，但我确实需要这样的动态导入：

<img src={item.machineImg} alt="imgMachine" />

Answer 1

首先确保图像等静态文件的公共目录并添加公共目录。到根文件夹。 更新 JSON 文件路径以引用公共目录。

尝试配置您的 vite 配置文件以动态导入，

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@imgs': '/public/imgs',
      '@data': '/public/data'
    }
  }
});

React 中的动态导入！

<img key={index} src={item.machineImg.replace(/^\/src\//, '@imgs/')} alt="imgMachine" />

觉得有帮助就点个赞吧