React前端部署域名子路径

虾泥跳

已于 2022-03-10 14:32:02 修改

阅读量2k

点赞数

分类专栏： react nginx 文章标签：前端 react.js javascript nginx

于 2022-03-10 14:30:30 首次发布

本文链接：https://blog.csdn.net/qq_1332051236/article/details/123400255

版权

react 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

nginx

1 篇文章 0 订阅

订阅专栏

当访问类似http://www.domain.com/manager/，希望得到一个区别于访问http://www.domain.com/前端页面需要配置如下，

nginx

server {
	listen 80;
	server_name domain.com;

	#此处更改对应路径
	location ^~ /manager {
			alias /home/official/manager/build;
			index index.html index.htm;
	}
	location / {
			root /home/official/portal/build;
			index index.html index.htm;
	}
}

react-router

// basename将路由前缀统一加上/manager
<BrowserRouter basename="/manager">
        <App />
</BrowserRouter>

package.json

// 更改homepage为对应路径即可
{
  "version": "0.1.0",
  "private": true,
  "homepage": "/manager",
  ...
 }

扩展

接口请求需要区分可以统一加上路径，再对应更改nginx配置，如axios中可以做如下配置

const httpClient = axios.create({
    // withCredentials: true,
    // timeout: 10000,
    baseURL: '/api', //统一路径api
    params: { random: new Date().getTime() },
});