使用Vite+Firebase Hosting部署多页面网站失败求助

1. 修正Vite多页面配置 #

从构建日志可以看出，Vite仅生成了index.html，说明你的项目未配置多页面入口。需在项目根目录的vite.config.ts（或vite.config.js）中添加多页面配置：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      // 配置所有页面的入口HTML路径，替换为你实际的页面文件
      input: {
        index: './hosting/index.html',
        about: './hosting/about.html',
        contact: './hosting/contact.html'
      }
    }
  }
});

配置完成后重新执行npm run build，此时dist目录下会生成所有页面对应的HTML、CSS和JS文件。

2. 调整Firebase配置 #

当前firebase.json的source指向hosting，但Vite默认将构建产物输出到dist目录，需修改配置指向正确的构建目录：

{
  "hosting": {
    "source": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    // 若无需后端框架支持，可移除以下配置
    // "frameworksBackend": {
    //   "region": "us-east1"
    // }
  }
}

如果希望Vite直接将产物输出到hosting目录，可在vite.config.ts中添加outDir配置：

export default defineConfig({
  build: {
    outDir: './hosting',
    rollupOptions: {
      input: {
        index: './hosting/index.html',
        about: './hosting/about.html'
      }
    }
  }
});

这种情况下firebase.json的source保持hosting即可，建议将源码页面移至src目录，避免构建产物覆盖源码。

3. 验证与部署 #

• 执行npm run build后，检查dist（或hosting）目录下是否存在所有页面的文件。
• 用firebase serve本地预览，确认所有页面可正常访问。
• 执行firebase deploy，部署完成后访问Firebase域名验证多页面功能。

排查要点 #

• 确保页面HTML中脚本、样式的引用路径正确，Vite会自动处理路径，但手动引用的资源需注意相对路径。
• 检查firebase.json的ignore规则未误排除页面文件，当前规则不会影响HTML文件。
• 若使用TypeScript，确认tsc命令能编译所有页面的入口脚本。

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