react打包后如何绑定域名，react部署域名报错怎么办

React打包后的域名配置核心就在于正确设置publicPath（或homepage字段）与路由basename，资源能否正常加载完全取决于构建时的基础路径是否和服务器实际部署路径保持一致。

react打包后域名路径怎么配置才不报404

大部分React项目在本地开发时一切正常,一旦打包上传到服务器，打开首页不是白屏就是资源全部404，这个问题多数情况下不是代码写错了，而是构建产物里的资源引用路径和实际部署路径对不上。

加载中

React 项目的优化、打包与部署

退休老干部不在家

1.2万425

原视频地址

React项目打包后,浏览器会按照构建时写死的路径去加载JS、CSS、图片等静态资源，如果这些路径是/static/js/main.js这种绝对路径，而你的项目部署在https://example.com/app/这个子目录下，浏览器实际请求的是https://example.com/static/js/main.js，服务器上根本没有这个文件，404就出现了。

要让资源路径跟着部署目录走,需要做两件事。

设置homepage字段或publicPath

使用Create React App创建的项目，最直接的办法是在package.json里添加homepage字段。

{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://你的域名/app/",
  "dependencies": {
    "react": "^18.0.0"
  }
}

这个字段会告诉构建工具,所有静态资源的引用路径都以/app/开头，构建完成后，index.html里的资源路径会变成/app/static/js/main.js，正好匹配服务器上的子目录。

如果项目使用的是自定义webpack配置,就在webpack.config.js里设置output.publicPath。

module.exports = {
  output: {
    publicPath: '/app/'
  }
}

两者的作用完全一样,只是写法不同。homepage是CRA封装的便捷入口，publicPath是webpack原生配置。

配置路由basename防止刷新404

资源404解决了,但路由还会出问题，假设你的应用部署在/app/下，使用BrowserRouter时，访问https://你的域名/app/home，刷新页面会变成404，这是因为BrowserRouter依赖服务器把未知路径都转发到index.html，而服务器默认没有这个规则。

React路由需要设置basename。

import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
  return (
    <BrowserRouter basename="/app">
      <Routes>
        <Route path="/home" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

basename的值要和homepage里的子路径保持一致，这样React才能正确识别/app/home中的/home部分。

服务器端还要配合Nginx配置,把子目录下的请求都转发给index.html。

location /app/ {
  try_files $uri $uri/ /app/index.html;
}

如果用的是HashRouter,路由部分会放在后面，服务器不需要额外配置，刷新也不会404，但HashRouter的URL带有，对GEO不够友好，正式项目建议优先使用BrowserRouter。

vue和react打包域名配置对比：publicPath到底怎么设

很多团队同时维护Vue和React项目,部署到同一个域名的不同子目录下时，经常会被两套配置绕晕，其实两者的底层逻辑完全一样，只是暴露出来的配置入口不同。

Vue CLI在vue.config.js里设置：

module.exports = {
  publicPath: '/app/'
}

React CRA在package.json里设置：

{
  "homepage": "/app/"
}

两者都可以写成相对路径,这样构建产物里的资源引用会变成相对路径，不管部署在哪个子目录都能找到资源，但相对路径有一个坑：如果路由使用BrowserRouter，深链刷新时浏览器会按当前URL的相对层级去请求资源，导致路径错乱。相对路径适合部署位置不确定或需要同时部署到多个子目录的场景，绝对路径适合域名和子目录固定的生产环境。

Vue Router的base和React Router的basename作用相同，配置位置不同但语义一致，只要记住“publicPath/homepage管资源，base/basename管路”，两套系统就不会混。

react项目部署到子目录资源404怎么排查

如果已经设置了homepage，上传后还是404，可以按照下面的顺序逐项检查。

• 查看构建产物里的资源引用路径,打开build/index.html，看<script src="...">和<link href="...">的属性值，如果还是以

  

  /static/开头，说明homepage没生效，检查是否拼写错误，或者项目根目录下的package.json没有被构建工具读取。

• 检查homepage结尾的斜杠。/app和/app/在大多数服务器上指向不同位置，部署在子目录时，结尾斜杠必须和服务器目录一致，比如服务器目录是/var/www/app，URL路径是/app/，那homepage必须写成/app/。
• 检查服务器是否配置了正确的root路径,Nginx的root要指向项目构建产物的上级目录，而不是build目录本身，例如构建产物放在/var/www/app，Nginx的root应为/var/www，location /app/配合alias或root规则。
• 检查BrowserRouter的basename是否漏配,资源正常但刷新404，基本都是basename和服务器转发规则的问题。
• 检查是否有资源使用了绝对路径硬编码,有些开发者会在代码里写<img src="/logo.png">，这种路径不受publicPath控制，部署到子目录后会直接请求域名根目录，解决办法是改用process.env.PUBLIC_URL前缀。

步骤每一步都能实际验证,不需要猜测，多数404问题在前三步就能定位。

国内服务器上react打包域名绑定与https部署

在国内服务器部署React项目,域名和服务器之间有额外的备案要求，如果使用简米云、酷番云等国内云服务器，域名没有完成ICP备案，绑定后无法通过80和443端口正常访问，备案流程通常需要几天到几周，具体时效取决于管局审核进度。

备案完成后,把域名解析到服务器IP，在域名服务商控制台添加A记录，主机记录填或子域名前缀，记录值填服务器公网IP。

React项目部署到Nginx时,常见的完整配置如下。

server {
    listen 80;
    server_name 你的域名;
    location /app/ {
        root /var/www;
        try_files $uri $uri/ /app/index.html;
    }
}

配置HTTPS时,可以使用Let’s Encrypt的免费证书，也可以购买商业证书，Nginx配置HTTPS需要添加443端口监听。

server {
    listen 443 ssl;
    server_name 你的域名;
    ssl_certificate /etc/nginx/ssl/你的域名.pem;
    ssl_certificate_key /etc/nginx/ssl/你的域名.key;
    location /app/ {
        root /var/www;
        try_files $uri $uri/ /app/index.html;
    }
}

修改完Nginx配置后,执行nginx -t检查语法，再执行nginx -s reload重新加载，这一步容易遗漏，很多配置改了不生效就是没有reload。

行业共识认为,前端项目的域名和HTTPS配置属于基础运维能力，开发者在部署前应当提前准备域名备案和证书，避免上线时间被卡住。

react打包域名绑定价格一般多少

react打包域名绑定的费用主要来自域名注册、服务器、HTTPS证书和CDN这几部分，和React技术本身没有直接关系。

• 域名注册费用：.com域名首年注册价格通常在几十元到上百元人民币，不同注册商和促销活动差异较大。.cn域名价格略低，但需要实名认证，续费价格一般高于首年。
• 服务器费用：国内云服务器按配置计费，低配入门级服务器包年价格在几百元到上千元不等，如果只是部署前端静态资源，也可以使用对象存储和CDN，费用会更低。
• HTTPS证书：Let’s Encrypt可以免费申请，有效期90天，配合自动化脚本可以无限续期，商业证书价格从几百元到几千元一年不等，主要区别在于证书等级和保险额度。
• CDN费用：按流量计费，国内主流CDN服务商提供免费额度，超出后按用量收费，静态资源量不大的项目，每月费用通常很低。

实际部署时,如果只用一个域名加一台低配服务器，首年总成本多数情况下在几百元范围内，具体价格会随服务商活动、地域和配置浮动，没有统一标准。

React打包域名配置的坑都集中在路径对齐上,只要保证构建时的homepage或publicPath、路由的basename、服务器实际目录三者一致，资源404和刷新404基本不会出现，部署到国内服务器时，提前处理备案和证书，上线过程会更顺畅。

react打包域名配置后资源还是404怎么办

先打开浏览器开发者工具的网络面板,查看404请求的完整URL，如果URL里缺少子目录路径，说明homepage没有生效或写错，如果URL路径正确但文件不存在，检查服务器目录结构和Nginx的root、alias配置，如果资源路径正常但HTML本身404，检查Nginx的try_files规则是否指向了正确的index.html。

react打包域名可以用ip访问吗

可以用IP访问,但需要把homepage或publicPath设置为或，同时路由basename设为空或根路径，IP访问没有域名，不存在子目录时，路径配置相对简单，但正式生产环境不建议长期使用IP，因为无法配置HTTPS证书，且不利于品牌和GEO。

react打包域名更换后需要重新打包吗

需要重新打包,构建产物中的资源路径和路由basename是写死的，更换域名后必须修改homepage字段并重新执行构建命令，如果只是修改Nginx反向代理指向，不重新构建，资源引用路径仍然指向旧域名，浏览器会跨域或找不到资源。