Vercel部署Vite+React项目：TailwindCSS与图片资源失效求助

TailwindCSS @apply 样式未生效问题 #

• 检查 tailwind.config.js 的 content 数组，确保包含所有使用 @apply 的文件路径，比如你的 src/assets/css/login.css 以及引用该CSS的组件文件。示例配置需覆盖相关文件：

  /** @type {import('tailwindcss').Config} */
  export default {
    content: [
      "./index.html",
      "./src/**/*.{js,ts,jsx,tsx,css}", // 需包含css文件
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 确认 postcss.config.js 配置正确，必须包含 tailwindcss 和 autoprefixer，且顺序不能颠倒：

  export default {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }
  

• 检查CSS文件引入逻辑：确保 login.css 在项目入口文件（如 src/main.jsx）中正确导入，或在使用它的组件中通过 import './assets/css/login.css' 引入，避免局部导入时组件未被打包导致样式丢失。
• 验证 package.json 的 build 命令是否为 "build": "vite build"，自定义构建脚本可能跳过Tailwind的处理流程。

背景图片无法加载问题 #

• 修正CSS中的背景图路径：由于CSS文件在 src/assets/css/，图片在 src/assets/images/，相对路径应写为 ../images/[图片名]，示例：

  .login-bg {
    background-image: url('../images/login-bg.jpg');
  }
  

  避免使用绝对路径（如 /src/assets/images/...），生产环境下Vite会将资源打包到 dist/assets 目录，绝对路径无法正确指向资源。
• 检查 vite.config.js 的 base 配置：如果项目部署在Vercel的子路径下（比如 your-username.vercel.app/your-project-name/），需要设置 base 为对应路径：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    base: '/your-project-name/' // 根据实际部署路径调整
  })
  

  若部署在根域名下，base 可省略或设为 '/'。
• 确认图片资源格式符合Vite默认支持类型（jpg、png、svg等），若使用特殊格式，需在 vite.config.js 的 assetsInclude 中添加对应后缀：

  export default defineConfig({
    plugins: [react()],
    assetsInclude: ['*.webp'] // 示例：添加webp格式支持
  })
  

内容的提问来源于stack exchange，提问作者Lourd Nathaniel Gonzalez