因为要把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;
}
}

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

  1. 【深入nodejs开发】一、将node项目结合nginx部署到Centos7服务器

    一.安装nginx服务器环境 1.使用ssh工具连接服务器 2.安装宝塔面板,方便服务器管理 yum install -y wget && wget -O install.sh htt ...

  2. Linux上Nginx部署配置--二级域名配置

    http://www.cnblogs.com/yaunion/archive/2013/03/16/2962385.html http://blog.csdn.net/LBinin/article/d ...

  3. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  4. 使用nginx部署项目的相关资料

    1.简单的利用nginx部署前端项目 2.ubuntu 下 Nginx 的安装和配置 3.nginx配置文件nginx.conf超详细讲解 4.Nginx 安装与部署配置以及Nginx和uWSGI开机 ...

  5. create react app 项目部署在Spring(Tomcat)项目中

    网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...

  6. react+dva+antd项目构建

    一:版本升级 首先说明一下这里的dva是最新版: 2.3.2 1.初始化项目构建 npm install dva-cli -g dva -v dva-cli version 注:通过 npm 安装 d ...

  7. react实例:理解dva构建项目的原理

    请点击相应的步骤查看详情 我们首先搭建一个 dva Demo  项目(请参考react快速构建一个应用项目),然后逐步完成以下内容: 结构划分 设计 Model 组件设计方法 组件设计实践 添加 Re ...

  8. 转转hybrid app web静态资源离线系统实践

    一.前言 目前的转转app是一个典型的hybrid app,采用的是业内主流的做法: 客户端内有大量业务页面使用webview内加载h5页面承载. 其优点是显而易见的,即:web页面上线频度满足快速迭 ...

  9. 【前端】一步一步使用webpack+react+scss脚手架重构项目

    前言 前几天做了一个项目:[node]记录项目的开始与完成——pipeline_kafka流式数据库管理项目:因为开发时间紧迫,浅略的使用了一下react,感觉这个ui库非常的符合我的口味,现在趁着有 ...

随机推荐

  1. Ubuntu 配置IP地址方法

    接到一客户的服务器,开机已启动发现是Ubuntu系统,当时有点郁闷了,心想没有配置过ubuntu系统,这客户还在旁边了,心里有点紧张了,于是开始上网寻找各种方法配置,最终将IP配置好,给客户上架调试通 ...

  2. [Java]Eclipse无法import “com.sun.management.OperatingSystemMXBean”的解决方法

    背景: 当使用jdk的自带的API获取系统信息时,代码中import “com.sun.management.OperatingSystemMXBean”出现报错. 解决方法: Eclipse默认把这 ...

  3. POJ 3017 Cut the Sequence (单调队列优化DP)

    题意: 给定含有n个元素的数列a,要求将其划分为若干个连续子序列,使得每个序列的元素之和小于等于m,问最小化所有序列中的最大元素之和为多少?(n<=105.例:n=8, m=17,8个数分别为2 ...

  4. MovieReview—Wile Hunter(荒野猎人)

     Faith is Power         Faith is power, this sentence is not wrong. Find your own beliefs, and strug ...

  5. php循环a-z字母表

    ord — 返回字符的 ASCII 码值 说明 int ord ( string $string ) 返回字符串 string 第一个字符的 ASCII 码值.  该函数是 chr() 的互补函数. ...

  6. Harvest of Apples

    问题 B: Harvest of Apples 时间限制: 1 Sec  内存限制: 128 MB提交: 18  解决: 11[提交] [状态] [讨论版] [命题人:admin] 题目描述 Ther ...

  7. VS code 豆沙绿护眼主题

    一.下载亮色主题Atom One Light 二.找到settings.JSON,粘贴JSON 快捷键输入  Ctrl+Shift+p   ,输入settings,选择open settings (J ...

  8. nodejs安装遇到npm命令无法使用问题

    解决方法: 在用户文件夹中建立npm文件夹就可以使用了. 再使用npm命令就可以了.

  9. -安装与配置 FTP 服务器

    我们经常会使用 FTP,把本地电脑上的文件上传到服务器上,或者把服务器上的文件下载到自己的电脑里面.FTP 有服务端和客户端,FTP 的服务端提供了这种传输文件的服务,FTP 的客户端提供了传输文件的 ...

  10. 关于SQL语言的初步认识

    关于SQL语言的初步认识 1.一个SQL数据库是表(Table)的集合,它由一个或多个SQL模式定义. 2.一个SQL表由行集构成,一行是列的序列(集合),每列与行对应一个数据项. 3.一个表或者是一 ...