React + express 发布后的路由问题

写一简单的DEMO,create-react-app + Express 后台访问数据库,react前端展示。开发环境跑得很正常。

服务端发布环境也很简单,装node 10.9. ,按照网上方法,npm run build 后,把build 文件夹放到服务端代码的public 下。 一并拷贝到到node 10.9 服务器上,运行localhost:3001 空白页,路由不会配置了。

客户端打包后build目录
服务端目录结构

app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/supplies');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/supplies', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

index.js

var express = require('express');
var router = express.Router();

/* GET home page. */

router.get('/', function(req, res, next) {
  //res.render('index', { title: 'Express' });
  console.log('hello will!');
  //path.resolve(__dirname,'../public/build/index.html')
  res.sendFile('E:/www/react-backend/public/build/index.html');
});

module.exports = router;

localhost:3001 空白,
服务端输出
hello will!
[0mGET / [36m304 [0m0.620 ms - -[0m
[0mGET /static/css/main.0d5ac3e0.css [33m404 [0m10.199 ms - 1022[0m
[0mGET /static/js/main.ceae68dd.js [33m404 [0m18.856 ms - 1022[0m

调试发现
指向“http://localhost:3001/static/js/main.ceae68dd.js”的 <script> 加载失败。

阅读 2.7k
1 个回答

packge.json里面加上 homepage的配置,如果最后发布地址是服务器根路径,那么就配置homepage:'http://localhost:3001',然后重新打包,应该就可以了吧

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题