如何携.env文件部署React Vite项目至GitHub并解决数据异常问题

一、先搞定JSON Server的线上部署 #

GitHub Pages只能托管静态文件，没法运行Node.js服务，所以得把你的JSON Server部署到支持Node.js的免费平台（比如Vercel、Render）：

• 把JSON Server相关代码（包含db.json和配置了启动脚本的package.json）单独建仓库或和前端同仓库（推荐单独拆分）推到GitHub，package.json里的启动脚本要写清楚：

  "scripts": {
    "start": "json-server --watch db.json --port 3000"
  }
  

• 去对应平台关联这个仓库，按照指引完成部署，部署后会得到一个线上API地址，比如https://your-json-demo.vercel.app。

二、配置生产环境的环境变量 #

1. 在前端项目根目录新建.env.production文件，替换成线上的API地址：

   VITE_ENV = production
   VITE_API_URL = https://your-json-demo.vercel.app  # 换成你刚拿到的线上JSON Server地址
   

2. 执行npm run build打包前端项目，Vite会自动加载.env.production的配置，把代码里的API地址替换成线上地址。

三、重新部署前端到GitHub Pages #

把打包生成的dist（Vite默认输出目录）内容推到GitHub Pages对应的分支（比如gh-pages），或者用GitHub Actions配置自动部署，确保打包后的静态文件里的接口地址已经是线上的JSON Server地址。

四、解决跨域问题 #

如果前端（GitHub Pages域名）和后端（JSON Server部署域名）不同，会出现跨域报错：

• 在JSON Server的启动脚本里添加CORS参数：json-server --watch db.json --port 3000 --cors
• 或者在部署平台的后台配置里开启CORS支持，大部分平台都有现成的开关或配置项。

内容的提问来源于stack exchange，提问作者Hnin Lamin Thar