目录

1.概念

2.无根目录部署：

3.包含根目录部署

4.2种部署方式匹配说明：

1.概念

• 路由采用history模式，服务器需要做相应设置。
• 3种访问方式：

1. api访问
2. 路由访问
3. 静态资源访问

• 所以只要覆盖这3种请求方式就可以满足基本需求了。

2.无根目录部署：

nginx配置如下

location /{ 
	root c:/src/;
	try_files $uri  /index.html;
}		
		
location /api {    
	proxy_pass http://localhost:8888/;
}
		

3.包含根目录部署

     路由全局添加跟地址 ：

1. react 路由添加basename： <Router basename="/sub">，
2. vue router base="/sub"

    静态资源添加全局根地址 ：

1.        react在package.json 文件加上"homepage": "/sub"
2.        vue在vue.config.js文件加上publicPath:"/sub"

   资源部署在 sub目录，nginx配置如下：

location /sub{ 
	root c:/src/;
	try_files $uri  /sub/index.html;
 }		
		
location /api {    
	proxy_pass http://localhost:8888/;
 }

4.2种部署方式匹配说明：

• api访问，匹配location /api；

• 路由访问 匹配location /或者/sub，对应资源地址是$root/$uri；

• 静态资源 匹配location /或者/sub，对应资源地址是$root/index.html或者$root/sub/index.html;