使用 vite 构建 nginx 实现同一端口部署多个单页应用-运维-CodeUp Hub

1、需求

在 nginx 中部署三个前端项目，一个 vue3 的PC 应用端，一个 react 的管理端，一个 uniapp-vue3 的 H5 项目，三个项目部署在 nginx 的同一个的端口下，各自使用不同的目录来存放文件，最后用户访问时也用不同的目录名作为前缀来区分；三个项目均使用 broswer 路由来访问，不带 #

ip:8081/admin    访问 管理端
ip:8081/mobile   访问 H5 端
ip:8081/plat     访问应用端

将下面的三个地方配置完成了，就能保证正常的路由访问

nginx 的路由配置；
各个项目的资源前缀处理；
各个项目的路由前缀处理；

2、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 同样处理；

bash代码解读复制代码<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>
);