nginx配置同一域名同一端口下部署多个vue项目

 更新时间:2024年06月03日 10:56:03   作者:strggle_bin  
本文主要介绍了nginx配置同一域名同一端口下部署多个vue项目,可以根据根路径不同分别代理访问不同项目,具有一定的参考价值,感兴趣的可以了解一下

问题:

默认端口就只有一个,有多个项目需要部署到同一端口下。

解决方法:

根据根路径不同分别代理访问不同项目

第一步:

在vue.config.js文件中修改publicPath路径为/project/

......
module.exports = {
  // 部署生产环境和开发环境下的URL。
  // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.ruoyi.vip/admin/,则设置 baseUrl 为 /admin/。
  publicPath: "/project/",
  // 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)(默认dist)
  outputDir: 'dist',
  // 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
  assetsDir: 'static',
  ......
}

第二步:

在router文件夹中index.js文件中修改base为 ‘/project/’

... ...
const createRouter = () => new Router({
  base: '/project/', // 调整这里,路径跟publicPath保持一致即可
  mode: 'history',   // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: routers 
})

打包

调整完毕后,直接执行build打包命令,可以发现index.html引入js路径增加了/project

... ...
<script type="text/javascript" src="/project/static/js/chunk-vendors.js"></script>
<script type="text/javascript" src="/project/static/js/app.js"></script>
... ...

调整nginx的server配置

server {
    listen       9001;
    server_name  localhost;
	# 这个是第一个vue项目 页面访问地址 http://ip:9001
    location / {
    	 # root  F:/parant/dist;
         root   /home/project/dist/;
         index  index.html;
         try_files $uri $uri/ /index.html;
    }
    # 这个是第二个vue项目 页面访问地址 http://ip:9001/project
    location  /project {
    	 # alias  F:/subparant/dist;
         alias   /home/other_project/dist/;
         index   index.html;
         try_files $uri $uri/ /project/index.html;	#解决刷新404
    }
}

注意:如果页面中有二级路由的话,配置文件中一定不能用root,要用alias.

到此这篇关于nginx配置同一域名同一端口下部署多个vue项目的文章就介绍到这了,更多相关nginx部署多vue项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Nginx反向代理中出现502错误的解决步骤

    Nginx反向代理中出现502错误的解决步骤

    反向代理是一种服务器代理的方式,它代理了客户端的请求并将请求转发给后端服务器,然后将后端服务器的响应返回给客户端,但经常会遇到502错误,所以本文给大家介绍了Nginx反向代理中出现502错误的解决步骤,需要的朋友可以参考下
    2025-03-03
  • centos环境下nginx高可用集群的搭建指南

    centos环境下nginx高可用集群的搭建指南

    为了防止Nginx单点故障造成服务器瘫痪,本文介绍了Nginx实现高可用集群构建,下面这篇文章主要给大家介绍了关于centos环境下nginx高可用集群的搭建指南,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • nginx 代理80端口转443端口的实现

    nginx 代理80端口转443端口的实现

    这篇文章主要介绍了nginx 代理80端口转443端口的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • 制作nginx的RPM包教程

    制作nginx的RPM包教程

    这篇文章主要介绍了制作nginx的RPM包的方法,需要的朋友可以参考下
    2014-07-07
  • 如何利用Nginx防止IP地址被恶意解析详解

    如何利用Nginx防止IP地址被恶意解析详解

    这篇文章主要给大家介绍了关于如何利用Nginx防止IP地址被恶意解析的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Nginx具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-06-06
  • nginx proxy_cache批量清除缓存的脚本介绍

    nginx proxy_cache批量清除缓存的脚本介绍

    今天小编就为大家分享一篇关于nginx proxy_cache批量清除缓存的脚本介绍,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-02-02
  • Windows nginx安装教程及简单实践

    Windows nginx安装教程及简单实践

    这篇文章主要介绍了Windows nginx安装教程及简单实践的相关资料,需要的朋友可以参考下
    2016-10-10
  • Nginx禁止国外IP访问我的网站的实现

    Nginx禁止国外IP访问我的网站的实现

    本文主要介绍了Nginx禁止国外IP访问我的网站的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • nginx proxy_pass反向代理配置中url后加不加/的区别介绍

    nginx proxy_pass反向代理配置中url后加不加/的区别介绍

    这篇文章主要给大家介绍了关于nginx proxy_pass反向代理配置中url后加不加/的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • 通过浏览器查看nginx服务器状态配置方法

    通过浏览器查看nginx服务器状态配置方法

    这篇文章主要介绍了通过浏览器查看nginx服务器状态配置方法,本文讲解开启nginx-status的配置方法,并对服务器的参数做了详细讲解,需要的朋友可以参考下
    2015-04-04

最新评论