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;
    }
}

搞定～

edit: 有可能會遇到的坑

• dva的subscription會推薦 if (pathname === '/path'), 加上publicPath以後會匹配失敗
• pathToRegexp 生成的表達式是嚴格匹配，會跟publicPath匹配失敗

解決也很簡單 根據環境變量更改匹配規則便可。