关于项目
前端用的react-router,后台用的koa,后台只提供接口,
问题
将项目发布到线上koa如何处理静态文件?
前端用react-router路由,后端如何去匹配路由?
问题一
用koa-static 设置其路径 co-views 设置其返回的html
问题二
第一次一次刷新之后得到的响应是你的后端提供的,并且不再是 index.html 了,那么你既没有后端对应的路由也无法通过 index.html 加载前端路由,只有返回404 ;这里因为有前端路由,所以可以这样做,<b>后端做全局路由匹配,无论是发过来的请求 URL 是什么,统统返回 index.html 让前端去匹配不同的 URL</b> 如下面router路由;处理静态资源请求;routerAPI处理api请求,这里需要做一下路由匹配,先有中间件router处理,若匹配到api,交由routerAPI中间件处理;这样就完成了koa对前端react-router的处理
目录结构
--src
|---dist
|--index.html
|---app
|---server.js
//server.js
var koa = require('koa');
var Router = require('koa-router')
var statics = require('koa-static');
var views = require('co-views');
var app = koa();
app.use(statics(__dirname + '/../dist'));
var render = views(__dirname + '/../dist', {
map: {
html: 'swig'
}
});
var router= new Router();
router.get('/*', function * (next) {
if (!this.path.match(/api/)) {
this.body = yield render("index")
}
yield next
})
app.use(routerroutes()).use(router.allowedMethods())
var routerAPI= new Router({prefix: '/api'});
routerAPI.get('/users', function * (next) {
//doing somethings
return next
})
app
.use(routerAPI.routes())
.use(routerAPI.allowedMethods())