如何在React+Vite项目构建中包含sitemap.xml并部署至GitHub Pages/Netlify

一、Vite默认会自动处理 #

Vite项目的public文件夹是专门存放静态资源的目录，执行npm run build打包时，Vite会自动把public下的所有文件（包括你放的sitemap.xml）完整复制到dist（默认build输出目录）的根目录里，不需要额外配置。

你可以先在本地执行npm run build，打开生成的dist文件夹检查，sitemap.xml应该已经在里面了。

二、如果本地build后找不到文件的排查点 #

• 确认sitemap.xml确实放在项目根目录的public文件夹下，不是src或其他子目录。
• 检查vite.config.js/vite.config.ts里有没有自定义publicDir配置，如果改了静态资源目录路径，要把sitemap.xml移到对应的目录下。比如配置了publicDir: './static'，就把文件放到static文件夹。

三、GitHub Pages部署的注意事项 #

• 如果你用gh-pages包手动部署，确保部署脚本指向dist文件夹。比如在package.json里配置：

  "scripts": {
    "build": "vite build",
    "deploy": "gh-pages -d dist"
  }
  

  执行npm run deploy后，dist里的sitemap.xml会被同步到GitHub Pages的部署分支根目录。
• 如果用GitHub Actions自动部署，要保证Action脚本正确打包并上传dist的全部内容，比如典型的Action步骤：

  - name: Build project
    run: npm run build
  - name: Deploy to GitHub Pages
    uses: peaceiris/actions-gh-pages@v3
    with:
      github_token: ${{ secrets.GITHUB_TOKEN }}
      publish_dir: ./dist
  

四、Netlify部署的注意事项 #

Netlify会自动识别Vite项目，默认执行npm run build并把dist文件夹作为部署源。只要本地build能生成sitemap.xml，Netlify部署后该文件会自动出现在网站根目录。

如果需要自定义部署规则，可以在项目根目录创建netlify.toml文件，明确配置build命令和输出目录：

[build]
  command = "npm run build"
  publish = "dist"

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