1、需求
在 nginx 中部署三个前端项目，一个 vue3 的PC 应用端，一个 react 的管理端，一个 uniapp-vue3 的 H5 项目，三个项目部署在 nginx 的同一个的端口下，各自使用不同的目录来存放文件，最后用户访问时也用不同的目录名作为前缀来区分； 三个项目均使用 broswer 路由来访问，不带 #
ip:8081/admin 访问 管理端
ip:8081/mobile 访问 H5 端
ip:8081/plat 访问应用端
将下面的三个地方配置完成了，就能保证正常的路由访问
- nginx 的路由配置；
- 各个项目的资源前缀处理；
- 各个项目的路由前缀处理；
2、配置过程
开始一步一步进行
1、nginx 的配置
- 在 nginx 的 html 目录中新建三个目录来存放各自项目打包后的代码， admin， plat，h5 ；
- 修改 nginx 中 conf 目录里的 nginx 配置文件，关键部分如下，react 和 vue3 的配置都一样
server {
add_header Access-Control-Allow-Origin *;
listen 8081;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location /admin {
alias E:/xxx/nginx-1.24.0/html/admin; # 存放代码的目录
index index.html index.htm;
try_files $uri $uri/ /admin/index.html; # browser 路由配置
}
location /plat {
alias E:/xxx/nginx-1.24.0/html/plat; # 存放代码的目录
index index.html index.htm;
try_files $uri $uri/ /plat/index.html; # browser 路由配置
}
location /mobile {
alias E:/xxx/nginx-1.24.0/html/h5; # 存放代码的目录
index index.html index.htm;
try_files $uri $uri/ /h5/index.html; # browser 路由配置
}
# 后台接口的反向代理，以 /csp_prod_api 开头的 http 请求都会转到 /csp
location /csp_prod_api {
proxy_pass http://192.168.3.173:8083/csp; # 后台接口地址
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
2. 项目的资源前缀处理
- vite 中的打包配置，以 admin 项目为例，修改 vite 的顶层配置，打包部署后访问就会发现 js ，css，图片等静态资源都会带上 /admin 前缀；
base: mode === 'development' ? '/' : '/admin/',
这里要分两类， 一类是在 public 目录下的静态文件，使用的时候用的是根目录方式，不需要import ，因为不参与打包，不会自动带上目录前缀，需要手动在代码里加上； 另一类是 src 下的 assets 目录下的静态文件，需要使用 import 的方式引入来使用，因此打包时会自动带上 base 前缀，不需要额外处理；
- 使用 public 中的静态文件
vite 配置中配置 base 选项以后，用 import.meta.env.BASE_URL 可以拿到这个配置的值，
const BASE_URL = import.meta.env.BASE_URL;
在模板中直接使用 public 中的文件，需要手动加上 base 前缀，以 vue 的 template 为例，react 的 jsx 同样处理；
<img :src="`${BASE_URL}images/${t.icon}`"
不推荐在 public 中使用静态文件，如果项目大了拼前缀会有些麻烦，
- 使用 src 下的 assets 目录中的静态文件
import xxxIcon from '@/assets/images/xxx.png'
直接使用，不需要处理，打包后会自动带上 BASE_URL 值前缀
<img :src="xxxIcon" />
3. 项目的 broswer 路由处理
- vue3项目， 需要给项目路由带上 base 前缀
import { createRouter, createWebHistory } from "vue-router";
const BASE_URL = import.meta.env.BASE_URL;
const router = createRouter({
history: createWebHistory(BASE_URL), // 就是 /admin
...
});
- react 项目 如果使用 HashRouter 就不用处理，用 browserRouter 就要加上 basename
import { HashRouter, BrowserRouter } from 'react-router-dom';
const BASE_URL = import.meta.env.BASE_URL;
ReactDOM.createRoot(document.getElementById('root')!).render(
<Provider store={store}>
<BrowserRouter basename={BASE_URL}>
<App />
</HashRouter>
</BrowserRouter>
);
附加
- 后台接口的 nginx 反向代理配置，如上；
- 关于 borowser 路由的 nginx 重定向配置，如上；
