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前缀
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/)需要注意的几点的更多相关文章
- 【深入nodejs开发】一、将node项目结合nginx部署到Centos7服务器
一.安装nginx服务器环境 1.使用ssh工具连接服务器 2.安装宝塔面板,方便服务器管理 yum install -y wget && wget -O install.sh htt ...
- Linux上Nginx部署配置--二级域名配置
http://www.cnblogs.com/yaunion/archive/2013/03/16/2962385.html http://blog.csdn.net/LBinin/article/d ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- 使用nginx部署项目的相关资料
1.简单的利用nginx部署前端项目 2.ubuntu 下 Nginx 的安装和配置 3.nginx配置文件nginx.conf超详细讲解 4.Nginx 安装与部署配置以及Nginx和uWSGI开机 ...
- create react app 项目部署在Spring(Tomcat)项目中
网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...
- react+dva+antd项目构建
一:版本升级 首先说明一下这里的dva是最新版: 2.3.2 1.初始化项目构建 npm install dva-cli -g dva -v dva-cli version 注:通过 npm 安装 d ...
- react实例:理解dva构建项目的原理
请点击相应的步骤查看详情 我们首先搭建一个 dva Demo 项目(请参考react快速构建一个应用项目),然后逐步完成以下内容: 结构划分 设计 Model 组件设计方法 组件设计实践 添加 Re ...
- 转转hybrid app web静态资源离线系统实践
一.前言 目前的转转app是一个典型的hybrid app,采用的是业内主流的做法: 客户端内有大量业务页面使用webview内加载h5页面承载. 其优点是显而易见的,即:web页面上线频度满足快速迭 ...
- 【前端】一步一步使用webpack+react+scss脚手架重构项目
前言 前几天做了一个项目:[node]记录项目的开始与完成——pipeline_kafka流式数据库管理项目:因为开发时间紧迫,浅略的使用了一下react,感觉这个ui库非常的符合我的口味,现在趁着有 ...
随机推荐
- MATLAB 添加自定义的模块到simulink库浏览器
在simulink 浏览器窗口File->new->library,打开编辑窗口,将自定义的模块托人编辑窗口.保存为DC_MOTOR_sub_lib.mdl文件. 新建function文件 ...
- 加载动画插件spin.js的使用随笔
背景: 在请求后台的“漫长”等待过程中,为了提升用户体验,需要一个类似 的加载动画效果,让用户明确现在处于请求过程中,而不是机子down掉或者网站死了 静态demo(未与后台交互): HTML代码如 ...
- setup命令
setup——配置网络(centos) 命令所在路径:usr/bin/setup 示例1: # setup
- python爬虫之路——初识爬虫原理
爬虫主要做两件事 ①模拟计算机对服务器发起Request请求 ②接收服务器端的Response内容并解析,提取所需的信息 互联网页面错综复杂,一次请求不能获取全部信息.就需要设计爬虫的流程. 本书主要 ...
- VR/AR软件—Mirra测试(截至2017/11/13),使AR/VR创作更加便捷
Mirra(截至2017/11/13)https://www.mirra.co/ 1.主要特点: 目前仅支持VR,不支持AR 在浏览器(仅支持chrome,firefox)上进行创作,但目前不能直接在 ...
- [学习笔记] C++ 历年试题解析(三)--小补充
小小的补充一下吧,因为李老师又把直招的卷子发出来了.. 题目 1.有指针变量定义及初始化int *p=new int[10];执行delete [] p;操作将结束指针变量p的生命期.(×) 解释:试 ...
- CPP-基础:extern"C"
简介:extern "C" 包含双重含义,从字面上即可得到:首先,被它修饰的目标是“extern”的:其次,被它修饰的目标是“C”的.让我们来详细解读这两重含义. 含义: 1.被e ...
- vue axios 请求 https 的特殊处理
最近遇到自签发的CA证书,在前端axios请求https请求时,无法自动加载证书. 解决方法:将无法加载的请求在浏览器新窗口手动加载,选择继续连接. 重新加载,问题解决. 根本原因:因为自签发证书,浏 ...
- c#和Java中的接口
使用场景: 在c#和Java中: 1.接口可以实现“多继承”(多实现),一个类只能继承自一个父类,但是可以实现多个接口. 2.接口解决了不同类型之间的多态问题,比如鱼与船不是同一类型,但是都能在水里“ ...
- 01_12_Struts2_访问Web元素
01_12_Struts2_访问Web元素 1. 配置struts.xml文件 <package name="login" namespace="/login&qu ...