Vite 将资产路径附加到图像 URL

Question

使用 Vite/React/Tailwind，我正在尝试设置 dev/prod 工作流程，以便存储在 'public' 目录中的图像在部署到 gh-pages 时具有正确的路径。下面是我的 Tailwind 配置起点，其中 'backgroundImages' 属性引用存储在 'public'.

中的图像文件

module.exports = {
  mode:'jit',
  content: ["./src/**/*.{html,jsx}"],
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      'splash-hex': '#6BD1D2',
      'splash-rgba': 'rgba(107, 209, 210,1.0)',
      'splash-hsla': 'hsla(181, 53%, 62%, 1.0)',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    backgroundImages:{
      'default':'url("./10475996-3x2-940x627.jpeg")'
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
  prefix: 'tw-',
  plugins: [],
}

在开发中这工作正常。

http://localhost:3000/10475996-3x2-940x627.jpeg

在 'dist' 文件夹中，当 'build' 为运行时看起来也是正确的。

当部署到 gh-pages 时，路径更改为 /assets/ 并且图像不再像我根据 Vite 预期的那样从根目录提供。

https://unevenartwork.com/assets/10475996-3x2-940x627.jpeg

是否有配置可以在部署时抑制 /assets/ 或其他解决方案？

Answer 1

这个问题的解决方案分为两部分。

首先，如所示，在 build 或 deploy 命令上，Rollup 将在配置中设置时创建输出目录。只需将图像资源放在 src/img 文件夹中，作为 Rollup 输出到 dist 文件夹的目标。

然后，在 Tailwind 配置中，确保在资产路径中引用父目录 - ../img/10475996-3x2-940x627.jpeg 而不是 ./img/10475996-3x2-940x627.jpeg。这有助于 Vite 与父目录建立正确的路径关联。

这似乎对 Tailwind 主题扩展中定义的属性有效。 img src 属性值没有遇到问题。

Vite 将资产路径附加到图像 URL

Vite appending assets path to image URLs

tailwind-css

vite