creat-react-app/dva静态项目，用nginx部署在次级域名路径（如a.com/sub/）需要注意的几点...-优快云博客

本文分享了将前端项目部署到域名子目录的过程与注意事项，包括调整index.html中资源路径、配置react-i18next的locale加载方式、设置react-router的基础路径、修改webpack的publicPath配置及nginx的location配置。

因为要把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前缀

const browserHistory = useRouterHistory(createHistory)({
  basename: process.env.PUBLIC_PATH || '/',
})

如果是dva
import { createHistory } from 'history' import { useRouterHistory } from 'react-router' const app = dva({ history: browserHistory, });

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

转载于:https://www.cnblogs.com/tianshifu/p/7334245.html