首页 > 网站技巧 > 服务器 > nginx > Nginx部署多个vue项目

Nginx部署多个vue项目的方法步骤

2023-06-14 11:56:01 作者：傻瓜搬砖人

本文主要介绍了Nginx部署多个vue项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

例如现在有一个需求，要在同一台Nginx上部署两个基于若依的项目，分别是projectA和projectB,projectA 部署在 http://example.com 域名下，projectB部署在http://example.com/test 下。

1. projectA 部署

1.1 前端部署

打包编译

# 进入前端项目根路径
cd projectA/ruoyi-ui
# 编译
npm run build:prod
# 编译会生成 dist目录， 里面是编译的产物

Nginx 配置

location /  {
                # 配置访问根路径，将打包后的dist目录放在 home目录下
                root      /home/dist;
                index index.html index.htm;
                charset utf-8;
                # 防止浏览器刷新
                try_files $uri $uri/ /index.html;
}

1.2 后端部署

编译出jar包，上传至服务器

Nginx 配置后端服务

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;
                          # 假设 后端服务在本机的8080端口
                          proxy_pass http://localhost:8080/;
                  }

2. projectB部署

2.1 前端部署

项目修改：

1> 找到vue.config.js 配置前缀test

publicPath: process.env.NODE_ENV === "production" ? "/test/" : "/",

2> 找到 src/router/index.js 配置

export default new Router({
  mode: 'history', // 去掉url中的#
  // 配置 test
  base:'test',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})
// 静态资源配置根路径
export function getBaseUrl() {
  let baseUrl = ''
  if (process.env.NODE_ENV === 'development') {
    // 开发模式
    baseUrl = '/'
  } else {
    // 生产环境
    baseUrl = '/test/'
  }
  return baseUrl
}

3> nginx 配置

location /test/ {
                        # 前端根路径，记得最后加 /
                        alias /home/test/dist/;
                        index index.html index.htm;
                        try_files $uri $uri/ /test/index.html;
        }

2.2 后端部署和前面一样只是换了端口(如果服务location变了记得前端也要修改)

例如：

    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:8082/;
                  }

通过以上配置就可以通过http://example.com 访问projectA 通过http://example.com/test访问projectB

到此这篇关于Nginx部署多个vue项目的方法步骤的文章就介绍到这了,更多相关Nginx部署多个vue项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！