Ruoyi-Vue前端部署-nginx部署多个vue前端项目

nginx部署多项目，可以使用nginx配置多个端口，并配置不同的前端项目；还可以使用同一端口，通过不同访问路径区分不同前端项目
本文只讲述使用同一端口部署多项目的情况；使用多端口部署项目只需在nginx配置文件配置多个项目即可，详细内容可参考其他文章。

1. nginx配置文件修改

在nginx.conf文件内，配置多个location，每个前端项目对应一个location，注意，配置路径一定要用alias，这里，我配置了两个项目，即sys和mqsb两个项目，分别部署

http {
    ...
    
    server {
        listen       80;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        
        #location / {
        #    root   html;
        #    index  index.html index.htm;
        #}
		
		location /sys {
            alias   html/sys/;
            index  index.html index.htm;
        }
		
		location /mqsb {
            alias   html/mqsb/;
            index  index.html index.htm;
        }
		
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
}

2. 前端项目(Ruoyi-Vue)处理

2.1 添加访问路径配置

配置文件(.env.development、.env.production)，新增前端项目访问路径，一定要和nginx配置文件的location对应上。

# 前端项目访问路径
VUE_APP_NGINX_SYS='/mqsb'

2.2 修改前端项目默认子路径

修改vue.config.js文件的publicPath参数

module.exports = {
  publicPath:
    process.env.NODE_ENV === "production" ? process.env.VUE_APP_NGINX_SYS : "/",
}

2.3 修改路由文件

修改router文件的index，修改路由参数如下

const sys = process.env.VUE_APP_NGINX_SYS;
export default new Router({
  mode: "history", // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes,
  base: sys,
});

修改完成，重启nginx即可访问
nginx访问地址为：http://127.0.0.1
部署的msqb项目访问地址为：http://127.0.0.1/sys/
部署的msqb项目访问地址为：http://127.0.0.1/mqsb/