由于要把dist文件夹部署在一个域名的次级目录,没想到和运维同窗一块儿折腾了一下午。。css
放在这里备忘,也给后来的同窗一些可查的中文资料:html
1,dva/cra给你的模板index.html是在public里面的,webpack会原封不动拷到dist,其中引入index.js和index.css都是绝对路径,能够用webpack ejs插件生成htmnl,由于我用了dva,不太想改webpack 配置太多,这里选用直接手去掉前缀/变成相对路径react
2, 项目里面使用了react-i18next, locale文件是放到public里面的,配置locale初始化的时候根据环境变量修改下引入目录是/仍是/sub/webpack
3,路由react-router匹配的prefix前缀nginx
export const browserHistory = useRouterHistory(createHistory)({ basename: process.env.PUBLIC_PATH || '/', }) 若是是dva import { createHistory } from 'history' import { useRouterHistory } from 'react-router' const app = dva({ history: browserHistory, });
小坑一个!
dva里面的路由跳转会这么写:web
import { browserHistory } from 'dva/router'; browserHistory.push('some/route')
因为咱们自定义了history,这样会失效, 因此必定记得要import刚才export出来的history,而不是dva默认的那个!react-router
4,webpack设置publickPath:/sub/app
5,nginx配置:运维
server { listen 80; server_name www.abc.com; root /项目/root地址/不带sub; location /sub { try_files $uri $uri/ /sub/index.html; } }
搞定~插件
edit: 有可能会遇到的坑
- dva的subscription会推荐
if (pathname === '/path')
, 加上publicPath以后会匹配失败- pathToRegexp 生成的表达式是严格匹配,会跟publicPath匹配失败
解决也很简单 根据环境变量更改匹配规则便可。