creat-react-app/dva静态项目,用nginx部署在次级域名路径如a.com/sub/需要注意的几点

因为要把dist文件夹部署在一个域名的次级目录,没想到和运维同学一起折腾了一下午。。

在这里备忘,也给后来的同学一些可查的中文资料:

1,dva/cra给你的模板index.html是在public里面的,webpack会原封不动拷到dist,其中引入index.js和index.css都是绝对路径,可以用webpack ejs插件生成htmnl,因为我用了dva,不太想改webpack 配置太多,这里选用直接手去掉前缀/变成相对路径

2,项目里面使用了react-i18next,locale文件是放到public里面的,配置locale初始化的时候根据环境变量修改下引入目录是/还是/sub/

3,路由react-router匹配的prefix前缀

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里面的路由跳转会这么写:

import { browserHistory } from 'dva/router';
browserHistory.push('some/route')

由于我们自定义了history,这样会失效,所以一定记得要import刚才export出来的history,而不是dva认的那个!

4,webpack设置publickPath:/sub/

5,Nginx配置:

server {
    listen 80;
    server_name www.abc.com;
    root /项目/root地址/不带sub;

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

搞定~

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...