拓冰网站定制 
Create React App 如何部署到 GitHub Pages 并解决客户端路由 404【免费下载链接】create-react-appSet up a modern web app by running one command.项目地址: https://gitcode.com/gh_mirrors/cr/create-react-app把一个 Create React App 项目发布到 GitHub Pages 是最常见的静态托管需求但如果应用使用了客户端路由例如 React Router 的browserHistory直接刷新子路由会得到 404。这篇文章按官方文档的操作路径完成两件事配置homepage并通过gh-pages把npm run build的产物发布到项目页面然后针对 pushState 路由在 GitHub Pages 上的 404 给出文档给出的两种处理方案。适用前提项目由 Create React App 创建react-scripts版本不低于 0.2.0当前创建的新项目默认满足本地机器 Node 版本 14服务器端不要求部署目标是项目页https://用户名.github.io/项目名或用户页https://用户名.github.io文档对两者都给出了配置。发布前的构建build目录与部署提示执行生产构建npm run build该命令会把应用打包到build目录build目录是 Create React App 输出的唯一产物。如果package.json中没有homepage字段构建后终端会打印一份部署到 GitHub Pages 的说明cheat sheet提示补上homepage字段如果已经配置终端会打印npm run deploy相关的发布指引。构建提示逻辑见 printHostingInstructions.js部署完整文档见 deployment.md。第 1 步在package.json中添加homepage必做官方文档特别强调这一步跳过它应用不会正确部署。Create React App 用homepage字段来确定构建后 HTML 文件中的根 URL。打开package.json按页面类型添加字段项目页最常见情况homepage: https://myusername.github.io/my-app,用户页homepage: https://myusername.github.io,自定义域名页面homepage: https://mywebsite.com,其中myusername、my-app、mywebsite.com是文档示例值替换为你自己的 GitHub 用户名、仓库名或域名。第 2 步安装gh-pages并添加deploy脚本在项目根目录安装gh-pagesnpm install --save gh-pages使用 yarn 的项目用yarn add gh-pages然后在package.json的scripts中加入两条脚本scripts: { predeploy: npm run build, deploy: gh-pages -d build, start: react-scripts start, build: react-scripts build,predeploy脚本会在deploy运行前自动执行所以一次npm run deploy就完成了先构建、再发布。可选分支如果你部署的是用户页而不是项目页需要把部署目标改为main分支scripts: { predeploy: npm run build, - deploy: gh-pages -d build, deploy: gh-pages -b main -d build,第 3 步运行npm run deploy发布npm run deploy运行后先执行predeploy即npm run build再由gh-pages -d build发布build目录。文档描述的发布目标是https://myusername.github.io/my-app这类地址也就是说npm run deploy成功执行的完成标准是应用可以被访问到该 URL。第 4 步项目页需确认 GitHub Pages 源是gh-pages分支如果部署的是项目页最后还要在 GitHub 仓库的 Pages 设置中把站点来源设为gh-pages分支这样站点才会从发布脚本推送的分支取内容。用户页部署不需要这一步。可选配置自定义域名。在public/文件夹下添加CNAME文件内容为你的域名文档示例mywebsite.com解决客户端路由 404刷新子路由返回 404如果你的应用用了基于 HTML5pushStatehistory API 的路由器例如 React Router 使用browserHistory开发服务器能正常响应localhost:3000/todos/42但发布到 GitHub Pages 后对http://user.github.io/todomvc/todos/42这样的地址做一次全新页面加载时GitHub Pages 会返回 404——因为服务器并不知道/todos/42这个前端路由的存在。文档给出了两种解决方案方案 A改用 hash 路由。把 React Router 的 history 切换为 hash 路由hashHistoryURL 会变成形如http://user.github.io/todomvc/#/todos/42的形式文档指出这种 URL 会更长、更啰嗦但能避开 404。这是 GitHub Pages 上最直接的做法。方案 B404.html重定向。在部署前把一个带重定向代码的404.html文件放进build目录并在index.html中加上处理重定向参数的代码让 GitHub Pages 把 404 重定向回index.html。文档没有给出404.html的具体内容只说明了这个机制并指向外部指南如果你要采用这个方案需要按该指南自行补齐文件内容。另外两个文档提供的补充手段生产构建中如果应用已经 opt-in 了 service workerservice worker 会自动接管/todos/42这类导航请求并返回缓存的index.html可以通过eject后修改SWPrecachePlugin的navigateFallback、navigateFallbackWhitelist选项来调整或禁用这一行为。如果路由库需要感知应用挂在子路径下文档提到使用react-router^4时可以在任意Router上设置basename例如BrowserRouter basename/calendar/此时Link to/today/渲染出的链接是/calendar/today。对于没有使用 pushState 路由的应用也可以把homepage设为.react-scripts0.9.0及以上支持让所有资源路径相对于index.html应用就能从根路径移动到任意子路径而无需重新构建。部署报错排查npm run deploy过程中文档记录了两种典型报错及处理方式/dev/tty: No such a device or address创建一个新的 Personal Access Token执行git remote set-url origin https://user:tokengithub.com/user/repouser换成你的 GitHub 用户名token换成新建的 tokenrepo换成仓库名。注意这条命令会把 token 写进本地的 remote URL之后如果 token 失效需要更新再次执行npm run deploy。Cannot read property email of nullgit config --global user.name your_name替换为你的名字git config --global user.email your_email替换为你的邮箱再次执行npm run deploy。结果确认访问https://myusername.github.io/my-app或你的用户页/自定义域名地址应用能打开静态资源正常加载说明homepage配置与发布流程正确若使用了 hash 路由方案直接在浏览器地址栏输入带#的子路由地址如https://myusername.github.io/my-app/#/todos/42并刷新页面应由前端路由接管而不是返回 404若仍遇到 404对照本文解决客户端路由 404一节确认路由模式以及项目页是否已将 Pages 来源设为gh-pages分支。完整部署文档含静态服务器、Apache.htaccess等其他托管方案见 deployment.md路由配置见 adding-a-router.mdnpm run build的行为说明见 available-scripts.md。【免费下载链接】create-react-appSet up a modern web app by running one command.项目地址: https://gitcode.com/gh_mirrors/cr/create-react-app创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Create React App 如何部署到 GitHub Pages 并解决客户端路由 404
Create React App 如何部署到 GitHub Pages 并解决客户端路由 404【免费下载链接】create-react-appSet up a modern web app by running one command.项目地址: https://gitcode.com/gh_mirrors/cr/create-react-app把一个 Create React App 项目发布到 GitHub Pages 是最常见的静态托管需求但如果应用使用了客户端路由例如 React Router 的browserHistory直接刷新子路由会得到 404。这篇文章按官方文档的操作路径完成两件事配置homepage并通过gh-pages把npm run build的产物发布到项目页面然后针对 pushState 路由在 GitHub Pages 上的 404 给出文档给出的两种处理方案。适用前提项目由 Create React App 创建react-scripts版本不低于 0.2.0当前创建的新项目默认满足本地机器 Node 版本 14服务器端不要求部署目标是项目页https://用户名.github.io/项目名或用户页https://用户名.github.io文档对两者都给出了配置。发布前的构建build目录与部署提示执行生产构建npm run build该命令会把应用打包到build目录build目录是 Create React App 输出的唯一产物。如果package.json中没有homepage字段构建后终端会打印一份部署到 GitHub Pages 的说明cheat sheet提示补上homepage字段如果已经配置终端会打印npm run deploy相关的发布指引。构建提示逻辑见 printHostingInstructions.js部署完整文档见 deployment.md。第 1 步在package.json中添加homepage必做官方文档特别强调这一步跳过它应用不会正确部署。Create React App 用homepage字段来确定构建后 HTML 文件中的根 URL。打开package.json按页面类型添加字段项目页最常见情况homepage: https://myusername.github.io/my-app,用户页homepage: https://myusername.github.io,自定义域名页面homepage: https://mywebsite.com,其中myusername、my-app、mywebsite.com是文档示例值替换为你自己的 GitHub 用户名、仓库名或域名。第 2 步安装gh-pages并添加deploy脚本在项目根目录安装gh-pagesnpm install --save gh-pages使用 yarn 的项目用yarn add gh-pages然后在package.json的scripts中加入两条脚本scripts: { predeploy: npm run build, deploy: gh-pages -d build, start: react-scripts start, build: react-scripts build,predeploy脚本会在deploy运行前自动执行所以一次npm run deploy就完成了先构建、再发布。可选分支如果你部署的是用户页而不是项目页需要把部署目标改为main分支scripts: { predeploy: npm run build, - deploy: gh-pages -d build, deploy: gh-pages -b main -d build,第 3 步运行npm run deploy发布npm run deploy运行后先执行predeploy即npm run build再由gh-pages -d build发布build目录。文档描述的发布目标是https://myusername.github.io/my-app这类地址也就是说npm run deploy成功执行的完成标准是应用可以被访问到该 URL。第 4 步项目页需确认 GitHub Pages 源是gh-pages分支如果部署的是项目页最后还要在 GitHub 仓库的 Pages 设置中把站点来源设为gh-pages分支这样站点才会从发布脚本推送的分支取内容。用户页部署不需要这一步。可选配置自定义域名。在public/文件夹下添加CNAME文件内容为你的域名文档示例mywebsite.com解决客户端路由 404刷新子路由返回 404如果你的应用用了基于 HTML5pushStatehistory API 的路由器例如 React Router 使用browserHistory开发服务器能正常响应localhost:3000/todos/42但发布到 GitHub Pages 后对http://user.github.io/todomvc/todos/42这样的地址做一次全新页面加载时GitHub Pages 会返回 404——因为服务器并不知道/todos/42这个前端路由的存在。文档给出了两种解决方案方案 A改用 hash 路由。把 React Router 的 history 切换为 hash 路由hashHistoryURL 会变成形如http://user.github.io/todomvc/#/todos/42的形式文档指出这种 URL 会更长、更啰嗦但能避开 404。这是 GitHub Pages 上最直接的做法。方案 B404.html重定向。在部署前把一个带重定向代码的404.html文件放进build目录并在index.html中加上处理重定向参数的代码让 GitHub Pages 把 404 重定向回index.html。文档没有给出404.html的具体内容只说明了这个机制并指向外部指南如果你要采用这个方案需要按该指南自行补齐文件内容。另外两个文档提供的补充手段生产构建中如果应用已经 opt-in 了 service workerservice worker 会自动接管/todos/42这类导航请求并返回缓存的index.html可以通过eject后修改SWPrecachePlugin的navigateFallback、navigateFallbackWhitelist选项来调整或禁用这一行为。如果路由库需要感知应用挂在子路径下文档提到使用react-router^4时可以在任意Router上设置basename例如BrowserRouter basename/calendar/此时Link to/today/渲染出的链接是/calendar/today。对于没有使用 pushState 路由的应用也可以把homepage设为.react-scripts0.9.0及以上支持让所有资源路径相对于index.html应用就能从根路径移动到任意子路径而无需重新构建。部署报错排查npm run deploy过程中文档记录了两种典型报错及处理方式/dev/tty: No such a device or address创建一个新的 Personal Access Token执行git remote set-url origin https://user:tokengithub.com/user/repouser换成你的 GitHub 用户名token换成新建的 tokenrepo换成仓库名。注意这条命令会把 token 写进本地的 remote URL之后如果 token 失效需要更新再次执行npm run deploy。Cannot read property email of nullgit config --global user.name your_name替换为你的名字git config --global user.email your_email替换为你的邮箱再次执行npm run deploy。结果确认访问https://myusername.github.io/my-app或你的用户页/自定义域名地址应用能打开静态资源正常加载说明homepage配置与发布流程正确若使用了 hash 路由方案直接在浏览器地址栏输入带#的子路由地址如https://myusername.github.io/my-app/#/todos/42并刷新页面应由前端路由接管而不是返回 404若仍遇到 404对照本文解决客户端路由 404一节确认路由模式以及项目页是否已将 Pages 来源设为gh-pages分支。完整部署文档含静态服务器、Apache.htaccess等其他托管方案见 deployment.md路由配置见 adding-a-router.mdnpm run build的行为说明见 available-scripts.md。【免费下载链接】create-react-appSet up a modern web app by running one command.项目地址: https://gitcode.com/gh_mirrors/cr/create-react-app创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考