react项目打包 npm run build后资源路径找不到，放在服务器二级子目录空白问题解决方法。部署后刷新404问题

1.项目完成后直接npm run build 后发现资源找不到，chunk.css,js等全部是报错。

解决办法，在page.json文件里面增加一行："homepage": "./",

2.由于项目不是直接放在服务器根目录，放在二级子目录，导致路由无法匹配。指向错误页面。或者空白。 

解决方法：

react路由使用BrowserRouter ,里面增加一个属性basename，相当于基准url。不是默认的根路径

我的文件位置/WEB/reactdemo,

:打开页面浏览器显示的地址：http://localhost/WEB/reactdemo/home

3.部署后刷新出现无法找到not found的404问题

（以下内容为摘抄参考：React-Router browserHistory浏览器刷新出现页面404解决方案_hsany330的专栏-优快云博客）

问题分析

在刷新页面时，浏览器会向服务器请求localhost:8000/page1，服务器会去根目录下查找page1.html文件，发现找不到该文件，而服务器上实际上没有该物理路径，所有的路由页面实际上是根据react-router去渲染的，所以才会报404

第二案例分析

当刷新页面时，浏览器会向服务器请求example.com/list，服务器实际会去找根目录下list.html这个文件，发现找不到，因为实际上我们的服务器并没有这样的 物理路径/文件 或没有配置处理这个路由，所有内容都是通过React-Router去渲染React组件，自然会报404错误。这种情况我们可以通过配置Nginx或通过自建Node服务器来解决。

Nginx方式

采用Nginx方案需要先将所有资源打包生成到对应的目录，比如dist，然后做如下配置：

1. server {

2. server_name react.thinktxt.com;

3. listen 80;

5. root /Users/txBoy/WEB-Project/React-Demo/dist;

6. index index.html;

7. location / {

8. try_files $uri /index.html;

9. }

10. }

通过配置Nginx，访问任何URI都指向index.html，浏览器上的path，会自动被React-router处理，进行无刷新跳转。

通过修改webpack-dev-server运行方式

这个解决方法很简单，直接在运行时加入参数“–history-api-fallback”就可以了。我们修改package.json相关的代码:

1. "scripts": {

2. "build": "webpack",

3. "dev": "webpack-dev-server --inline --devtool eval --progress --colors --hot --content-base ./build --history-api-fallback"

4. },

Node服务端配置

一个express应用的配置示例：

1. const express = require('express');

2. const path = require('path');

3. const port = process.env.PORT || 8080;

4. const app = express();

6. //加载指定目录静态资源

7. app.use(express.static(__dirname + '/dist'))

9. //配置任何请求都转到index.html，而index.html会根据React-Router规则去匹配任何一个route

10. app.get('*', function (request, response){

11. response.sendFile(path.resolve(__dirname, 'dist', 'index.html'))

12. })

14. app.listen(port, function () {

15. console.log("server started on port " + port)

16. })

一个Koa应用的配置示例：

1. import Koa from 'koa';

2. import xtpl from 'koa-xtpl';

3. import path from 'path';

5. const app = new Koa();

6. const port = process.env.PORT || 8081;

8. app.use(xtpl({

9. root: path.resolve(__dirname, '../dist'),

10. extname: 'html',

11. commands: {}

12. }));

14. app.use(async(ctx, next) => {

15. await ctx.render('index', {});

16. });

18. app.listen(port, () => {

19. console.log('Server started on port' + port);

20. });

注意: 由于koa的这种方式端口与webpack-dev-server（8080）必须不同，所以还需要配合Nginx代理。例如：

1. server {

2. server_name react.thinktxt.com;

3. listen 80;

5. location / {

6. proxy_pass http://localhost:8081;

7. }

8. }

10. server {

11. server_name static.react.thinktxt.com;

12. listen 80;

14. location / {

15. proxy_pass http://localhost:8080;

16. }

17. }

既然我们的Nginx代理用了真实域名，自然别忘了修改一下host，如下：

1. 127.0.0.1 react.thinktxt.com

2. 127.0.0.1 static.react.thinktxt.com

这样我们就大功告成了，可以happy的在地址栏直接访问任何采用browserHistory方式配置的路由页面了。

总结

面对这种场景其实还有很多种方案，任何服务端的处理方式都可以，例如还有PHP、Apache等等。

其本质的原理就是利用服务端将任何请求都指向index.html，而在React应用中index.html又刚好通过React-Router配置了相应的路由，我们让服务器返回index.html，后面就交给前端路由来实现无刷新加载对应页面。

参考文章

• React Router 中文文档-Histories
• react-router 浏览器刷新，页面404，依靠nginx配置解决
• 小白学react之React Router实战