Astro+Tailwind+Flowbite部署Vercel（server/hybrid模式）出现404错误

我创建了一个搭配Tailwind的Astro项目，使用Flowbite作为组件库。本地运行一切正常，但将其以server或hybrid模式部署到Vercel后，浏览器控制台出现两个404错误：一个是Flowbite的min.js文件，另一个是处理用户偏好配色方案的自定义脚本。

相关配置文件 #

package.json #

{
  "name": "astro-portfolio",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro check && astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@astrojs/check": "^0.7.0",
    "@astrojs/tailwind": "^5.1.0",
    "@astrojs/vercel": "^7.6.0",
    "@emailjs/browser": "^4.3.3",
    "@fontsource-variable/raleway": "^5.0.18",
    "@fontsource/finger-paint": "^5.0.18",
    "astro": "^4.8.6",
    "tailwind-merge": "^2.3.0",
    "tailwind-scrollbar": "^3.1.0",
    "tailwindcss": "^3.4.3",
    "typescript": "^5.4.5"
  },
  "devDependencies": {
    "flowbite": "^2.3.0",
    "sass": "^1.71.1"
  }
}

astro.config.mjs #

export default defineConfig({
  integrations: [tailwind()],
  compressHTML: true,
  output: "hybrid",
  adapter: vercel()
});

Layout.astro的head标签内容 #

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <link rel="canonical" href="http://localhost:4321/" />
    <meta name="generator" content={Astro.generator} />
    <meta name="keywords" content={metadata.keywords.join(", ")} />
    <meta name="description" content={metadata.description} />
    <meta name="author" content="Javier Moreno" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta property="og:title" content={metadata.title} />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="" />
    <meta property="og:description" content={metadata.description} />
    <title>{title}</title>
    <script src="node_modules/flowbite/dist/flowbite.min.js"></script>
    <script src="src/assets/js/themes"></script>
</head>

部署后错误截图 #

问题原因及修复方案 #

1. Flowbite脚本路径问题 #

直接引用node_modules目录下的文件是错误的，生产部署时这个目录不会被包含在构建产物里，导致资源找不到。

• 修复方案：
  方式一：使用Astro的内联脚本引用，加上is:inline属性确保路径正确解析：

  <script is:inline src="/node_modules/flowbite/dist/flowbite.min.js"></script>
  

  方式二：更规范的做法是在Tailwind配置中集成Flowbite，同时按需导入组件功能。在tailwind.config.js中添加Flowbite的配置：

  export default {
    content: [
      "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
      "./node_modules/flowbite/**/*.js"
    ],
    plugins: [
      require('flowbite/plugin')
    ]
  }
  

  然后在需要使用Flowbite交互功能的组件中导入对应的模块，比如：

  <script type="module">
    import { initDropdowns } from 'flowbite';
    initDropdowns();
  </script>
  

2. 自定义主题脚本路径问题 #

• 错误点：脚本没有指定后缀（应该是themes.js），且直接引用src目录路径，部署后Astro会对资源进行打包，原路径无效。
• 修复方案：
  方式一：将脚本文件放到public目录下（比如public/assets/js/themes.js），然后引用绝对路径：

  <script src="/assets/js/themes.js"></script>
  

  方式二：使用ES模块导入，利用Astro的资源打包机制：

  <script type="module">
    import '../assets/js/themes.js';
  </script>
  

额外优化建议 #

• 将canonical标签的URL修改为生产环境的域名，不要保留localhost地址。
• 补充og:url的正确生产地址，提升SEO效果。

内容的提问来源于stack exchange，提问作者Br0wn