背景： 由于子域名有限，我们需要将不同的前端项目进行二级目录区分。
一、项目
现有三个项目：
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
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:
}