当前位置：首页 > news >正文

nginx一个域名下部署多套前端项目

news 2025/7/27 8:18:40

一、实际场景

1、现在前端创建了2个vue工程,分别为管理系统admin，另外一个是给酒店使用的管理系统hotel，另外一个是公司官网，一起是3个项目现在要部署上线，解决办法有2种方案
- 一个域名下来做官网，创建2个二级域名分别用于管理系统和酒店系统，(这个比较简单)
- 一个域名下部署几套项目，(今天主要介绍这个方式)
2、我们希望的访问方式
- https://xxx/admin/login访问的是管理系统
- https://xxx/hotel/login访问的酒店的管理系统

二、前端工程基本步骤

1、创建2个vue项目，分别为admin-web和hotel-web
2、现在以hotel-web系统为例
3、在.env.development、.env.sit、.env.production几个环境中都加上一个环境变量
```
VITE_BASE_PATH = "hotel"
```

4、在vite.config.js修改配置

import path from 'path';
import { defineConfig, loadEnv } from 'vite';
// https://vitejs.dev/config/export default ({ mode }) => {const env = loadEnv(mode, process.cwd()); // --> 配置return defineConfig({publicDir: 'static',base: env.VITE_BASE_PATH, // --> 配置server: { host: '0.0.0.0', // 允许外部访问port: 5000, // 可选：指定端口号，默认是3000strictPort: true, // 可选：如果指定端口被占用，直接退出而非选择一个空闲端口},// 省去别的配置})
}

5、在路由文件中使用全局变量

const router = createRouter({history: createWebHashHistory(import.meta.env.VITE_BASE_PATH), // -->这个地方routes,scrollBehavior() {return { top: 0 };},
});

6、现在运行前端工程的地址为:http://localhost:5000/hotel

7、打包

"scripts": {"dev": "vite --mode development","dev:sit": "vite --mode sit","build": "vite build","build:dev": "vite build --mode development","build:sit": "vite build --mode sit","build:uat": "vite build --mode uat","build:pro": "vite build --mode production","preview": "vite preview","lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore","format": "prettier --write src/","prepare": "husky install","svgo": "svgo -f src/icons/svg --config=src/icons/svgo.config.js"}

8、同理如果是admin的直接把VITE_BASE_PATH = "admin"就可以,官网的就改成VITE_BASE_PATH = "/"

三、在`nginx`中修改配置

1、自己安装nginx
2、找到配置文件

3、配置nginx文件


server {listen 80 default_server;listen [::]:80 default_server;server_name _;# 官网地址location / {try_files $uri $uri/ =404;index index.html index.htm index.nginx-debian.html;root /home/html;}# 管理系统location /admin {alias /home/admin-web/;index index.html index.htm;try_files $uri $uri/ /admin/index.html;}# 酒店系统location /hotel {alias /home/hotel-web/;index index.html index.htm;try_files $uri $uri/ /hotel/index.html;}# 静态文件location /hotel/static {alias /home/hotel-api/static;}location /admin/static {alias /home/admin-api/static;}# 管理系统后端接口location /api/v1/admin {proxy_pass http://127.0.0.1:8888/api/v1/admin;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header REMOTE-HOST $remote_addr;add_header X-Cache $upstream_cache_status;proxy_set_header X-Host $host:$server_port;proxy_set_header X-Scheme $scheme;proxy_connect_timeout 30s;proxy_read_timeout 86400s;proxy_send_timeout 30s;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";}# 酒店系统后端接口location /api/v1/hotel {proxy_pass http://127.0.0.1:8889/api/v1/hotel;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header REMOTE-HOST $remote_addr;add_header X-Cache $upstream_cache_status;proxy_set_header X-Host $host:$server_port;proxy_set_header X-Scheme $scheme;proxy_connect_timeout 30s;proxy_read_timeout 86400s;proxy_send_timeout 30s;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";}
}