React + 二级目录 + Nginx配置-Toy模板网

这篇具有很好参考价值的文章主要介绍了React + 二级目录 + Nginx配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

背景：由于子域名有限，我们需要将不同的前端项目进行二级目录区分。

一、项目

现有三个项目：
bsrm-web-manage
bsrm-web-operator
bsrm-web-testingorganization

二、期望访问路径

http://bsrm.life.com/bsrm-web-manage
http://bsrm.life.com/bsrm-web-operator
http://bsrm.life.com/bsrm-web-testingorganization

三、React 配置

1. webpack.default.js

添加publicPath

output: {
	// ...
	publicPath: process.env.NODE_ENV === "development" ? '/' : '/bsrm-web-manage'
},

output: {
	// ...
	publicPath: process.env.NODE_ENV === "development" ? '/' : '/bsrm-web-operator'
},

output: {
	// ...
	publicPath: process.env.NODE_ENV === "development" ? '/' : '/bsrm-web-testingorganization'
},

2. index.jsx

<BrowserRouter>标签中，添加 basename文章来源地址https://www.toymoban.com/news/detail-615041.html

export default function App(){ 
    return (
        <ConfigProvider locale={zhCN}>
            <BrowserRouter basename={process.env.NODE_ENV === "development" ? '' : '/bsrm-web-manage/'}>
                <RoutesWrapper routes={baseRoutes}/>
            </BrowserRouter>
        </ConfigProvider>
    )
}

export default function App(){ 
    return (
        <ConfigProvider locale={zhCN}>
            <BrowserRouter basename={process.env.NODE_ENV === "development" ? '' : '/bsrm-web-operator/'}>
                <RoutesWrapper routes={baseRoutes}/>
            </BrowserRouter>
        </ConfigProvider>
    )
}

export default function App(){ 
    return (
        <ConfigProvider locale={zhCN}>
            <BrowserRouter basename={process.env.NODE_ENV === "development" ? '' : '/bsrm-web-testingorganization/'}>
                <RoutesWrapper routes={baseRoutes}/>
            </BrowserRouter>
        </ConfigProvider>
    )
}

四、Nginx配置

location /bsrm-web-manage/ {
	alias /var/www/dev/fe/bsrm-web-manage/dist/;
	try_files $uri /bsrm-web-manage/index.html:
}

location /bsrm-web-operator/ {
	alias /var/www/dev/fe/bsrm-web-operator/dist/;
	try_files $uri /bsrm-web-operator/index.html:
}

location /bsrm-web-testingorganization/ {
	alias /var/www/dev/fe/bsrm-web-testingoraanization/dist/;
	try_files $uri /bsrm-web-testingorganization/index.html:
}

到了这里，关于React + 二级目录 + Nginx配置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！