react-BrowserRouter-nginx-二级目录配置

我的域名假设是http://www.abc.cn,二级目录是wsp;

前端两步:

第一步:package.json下加homepage字段:

    正确写:"homepage": "http://www.abc.cn/wsp/",

    注意:这里一定要是绝对路径,我网上找了好多都是
    方案1:"homepage": "."
    方案2:"homepage": "./"
    方案3:改node-module下面的react-script的。
    我都一一尝试过了,all ends no effect.

    配图加强理解:
    react-BrowserRouter-nginx-二级目录配置_第1张图片


第二步:

    在BrowserRouter元素里面加basename属性
    正确写法....  

    配图加强理解:  
    react-BrowserRouter-nginx-二级目录配置_第2张图片

 

后端一步:

后端配置找后端人员或者运维人员

   项目简单的话:复制下面这段代码到nginx配置里。

location / {
	#index index.html index.htm;
	try_files $uri /index.html;
}
location /wsp {
	try_files $uri $uri/ /wsp/index.html;
}

项目复杂的话:附赠公司大佬配置。

location /wsp/ {
   proxy_intercept_errors on;
   proxy_pass http://www.sina.com;#测试网址
   proxy_set_header Host $host; 
   proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
   error_page 404 = @wsp;
}
location @wsp {
   #try_files $uri /data/dali/tomcat-cluster/tomcat-9090/webapps/ROOT/wsp/;
   try_files $uri /wsp/index.html;
}

 

你可能感兴趣的:(前端框架--react)