Vite：从第三方库中的 node_modules 加载资产时出现问题

Question

我从 CRA 转到 Vite。

我正在使用一个外部组件库，它使用了一些内部资产（图像和字体）。在从 CRA 迁移之前一切正常，但现在 Vite 无法在开发模式下加载图像。

我收到 404 错误。

它试图从 node_modules/assets 加载它们，但资产被放置在

node_modules/component-library/dist/assets

一旦我完成构建，我就没有问题了。所有文件都正确复制到资产文件夹中。

我没有直接使用代码中的资产。图书馆内部正在使用这些资产。我只是在使用库中的一个组件，它正在使用这些内部资产。

这是我的配置文件：

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import { configDefaults } from 'vitest/config'

import * as path from 'path'
import react from '@vitejs/plugin-react'
import viteTsconfigPaths from 'vite-tsconfig-paths'
import svgrPlugin from 'vite-plugin-svgr'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/',
  server: {
    open: true,
    port: 3000,
  },
  plugins: [
    react(),
    viteTsconfigPaths(),
    svgrPlugin({
      svgrOptions: {
        svgProps: { role: 'img' },
        titleProp: true,
        descProp: true,
      },
    }),
  ],
  resolve: {
    alias: [{ find: '^@/', replacement: path.resolve(__dirname, 'src/') }],
  },
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './test-setup.ts',
    coverage: {
      reporter: ['text', 'html'],
      exclude: ['./node_modules/', './test-setup.ts', './dist/', './build/'],
    },
    exclude: [...configDefaults.exclude, 'build', 'ssl', 'coverage'],
    include: ['./src/**/*.{test,spec}.{ts,tsx}'],
  },
})

我尝试将库添加到 optimizeDeps 但它仍然无法正常工作。