tailwind-css - Vite 将 Assets 路径附加到图像 URL

Question

使用 Vite/React/Tailwind，我尝试设置开发/生产工作流，以便存储在“公共(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

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

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

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

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