ruoyi 多项目同一端口nginx配置

最新推荐文章于 2024-08-19 21:37:21 发布

q18777777777

最新推荐文章于 2024-08-19 21:37:21 发布

阅读量1k

点赞数

文章标签： nginx vue.js 前端

本文链接：https://blog.csdn.net/q18777777777/article/details/125681690

版权

本文详细介绍了如何使用Nginx配置多项目环境，包括前端项目的部署，涉及`vue.config.js`的配置调整以及`src/router/index.js`的修改。主要展示了两个项目路径的location设置，后端API的代理以及静态资源的处理。此外，还提到了前端路由的history模式和公共路径的调整，确保了不同环境下的正确访问。

摘要由CSDN通过智能技术生成

server {
listen 80;
server_name 域名/ip;

    location  / {   #项目1
    root    /home/work/dist;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
    }

    location /admin {    #项目2
    alias   /home/work/dist2/;
    index  index.html index.htm;
    try_files $uri $uri/ @router;
    }

    location @router {
            rewrite ^.*$ /admin/index.html last;
    }

	# 后端
    location /prod-api/ {
                    proxy_set_header Host $http_host;
                    proxy_set_header X-Real-IP $remote_addr;
                    proxy_set_header REMOTE-HOST $remote_addr;
                    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                    proxy_pass http://localhost:8080/;
            }

	# 后端
    location /dev-api/ {
                    proxy_set_header Host $http_host;
                    proxy_set_header X-Real-IP $remote_addr;
                    proxy_set_header REMOTE-HOST $remote_addr;
                    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                    proxy_pass http://localhost:8080/;
                    }

	# 图片
    location /img {
        alias   /home/work/temp_img/;
        autoindex on;
    }

注_前端需修改2处配置：
1. vue.config.js配置改为publicPath: process.env.NODE_ENV === "production" ? "/admin/" : "/",
2. src/router/index.js中改为
 export default new Router({
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  base:'/admin/',
  routes: constantRoutes
})

}