同一域名端口下，通过nginx部署多个vue项目

最新推荐文章于 2024-07-04 10:29:00 发布
最新推荐文章于 2024-07-04 10:29:00 发布
阅读量201 收藏
点赞数
文章标签： nginx vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45588201/article/details/134674245
版权

场景：由于公司项目需求，需要在同一域名端口下部署两个项目；
需要呈现的效果：
在这里插入图片描述
并且项目一中所有的静态文件js和css都要使用sdn下面的；项目二中所有的静态文件js和css都要使用sdnc下面的
在这里插入图片描述
需要修改的地方：

  1. 首先是config文件夹内的index.js文件，module.exports下面的build和dev两个对象里面
    在这里插入图片描述
    在这里插入图片描述

  2. 修改index.html文件
    在这里插入图片描述

  3. 修改src/router/index.js文件
    在这里插入图片描述
    我这里的base:process.env.BASEURL,所以我把config下的dev.env.js和prod.env.js里面的BASEURL由sdn改为了sdnc
    在这里插入图片描述
    PROJECT_URL不知道有啥用，我也改了，应该不改也行；

゛anqiaoyun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
nginx部署多个vue项目的方法示例
10-14
这通常在需要在同一域名下运行多个独立的应用程序时变得必要。我们将通过一个具体的示例来展示配置过程。 首先，我们的目标是在同一个域名下部署两个Vue项目，分别对应于`/login`和`/student/login`两个路径。这两...
nginx配置同一域名同一端口下部署多个vue项目
前端很杂，故名前端杂货铺 —— coderkey
08-22 8111
本地开发好了多个前端微信网页项目，想部署上线，但是微信那边必须得在默认端口下访问前端项目，于是就nginx配置同一域名同一端口下部署多个vue项目。根据根路径不同分别代理访问不同项目，刚好解决这个问题。默认端口就只有一个，多个项目实现不了。文件夹，然后放在对应的位置上 ，配置。以上全部搞完之后就可以访问了；
nginx部署多个项目；vue打包项目部署设置子路径访问；一个根域名（端口）配置多个子项目
最新发布
北海_南风
07-04 670
本文解决： - vue打包项目部署设置子路径访问； - nginx部署多个子项目； - 一个ip/域名 端口 配置多个子项目； - 配置后，项目能访问，但是刷新页面就丢失的问题
nginx配置多个vue项目
BluerCat的博客
06-14 4499
如何在nginx配置多个vue项目？第一种是使用不同的端口，既配置多个server即可。第二种是同一个端口，既在一个server里面配置多个vue项目。多个端口，只需要调整nginx配置，若使用同一个端口，则需要稍微调整一下vue打包配置。
nginx部署vue项目（包括一个nginx部署多个vue项目）
guoyp2126的博客
09-17 9387
在nginx部署vue项目，含同一端口号下，配置多个vue项目
一个域名多个vue项目
qq_42385482的博客
06-12 2146
在同一个域名下根据不同路径设置不同项目，主要是配置nginx，并与vue项目的路由模式有关。
Nginx同一端口下部署多个vue项目
qq_49206255的博客
03-18 1133
Vue项目打包后就变成了静态界面，在代码中动态配置的代理是不生效的，要注意默认配置。除了vue.config.js文件配置需要注意外，还有两个文件需要特别对待，分别是src-main.js、src-router-index.js文件，分别如图所示。跨域配置是根据配置进行拼接地址访问的，要注意请求后面的“/”，和跳转地址后的“/”，到现在重启nginx就可以访问了。根据不同项目的vue部署需求，可以在同一地址下的同一端口进行配置，配置完毕就可以访问vue前端项目了。在同一ip同一端口下部署一个vue项目。
docker nginx 部署多个项目的示例方法
09-30
主要介绍了docker nginx 部署多个项目的示例方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解nginx同一端口监听多个域名和同时监听http与https
09-30
主要介绍了详解nginx同一端口监听多个域名和同时监听http与https的相关资料,需要的朋友可以参考下
web服务器nginx+部署前端vue项目
03-22
### Nginx 与前端 Vue 项目的部署 ...对于前端 Vue 项目来说，通过简单的几步配置即可将其部署到 Nginx 上，从而充分利用 Nginx 的高性能和稳定性。无论是对于个人开发者还是企业级项目，Nginx 都是值得考虑的选择。
Nginx部署多个vue项目
weixin_45054115的博客
06-09 6443
同一台nginx 部署多个vue项目
Nginx-部署2个vue项目（多个项目）-二级域名设置代理
路虽远行则将至，事虽难做则必成。
05-16 3378
最近在实际开发过程中，需要在服务器部署2个项目。需要nginx二级域名。开始时候在网上查了一圈，各有说法，不是很全，很头大。这里把自己成功的二级域名代理记录一下。网上有很多文章说要该router.js文件，要该vue.config.js中的publicPath的路径问题。不用这么麻烦。很多文章都是说在nginx配置2个server就行了，但其实你不在域名哪里解析的话是访问不到的（重点）。
一个域名部署多个vue项目的方法
csdn姚宏波
04-28 3654
前言 在生产环境中，一般一个域名对应一个前端项目，但如果域名紧张，不想浪费二级域名，或者自己的测试项目，完全可以一个域名对应多个前端项目、 以 vue 为例，要实现这一点，需要 vue-router 中的 base 选项助力 2. base 简介 base 选项设置应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/" base 选项的默认值为 “/”，这个代表什么意思呢？ 我们知道，无论是开发模式下，还是生产模式下，我们都需要启动一个服务来运行我们的前端项目
Nginx 同一端口下部署多个 Vue3 项目
默存
10-17 2182
前端多项目部署到 Nginx 的同一监听端口下的解决方案，项目由一个主项目和多个子项目组成，主项目和子项目都是单独打包。主子项目之间是使用的腾讯开源的无界（WebComponent 容器 + iframe 沙箱）前端框架，能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等。
一台nginx部署多个vue项目
hiyoker的博客
03-05 364
修改router.js文件。修改vue.conf.js。
nginx部署多个前端vue项目，有3种方式
LuoJun的博客
11-12 2521
域名配置 端口配置 location配置 首先我们看一下nginx.conf配置文件 为了方便管理，在/usr/local/nginx/conf.d/ 创建自己的*.conf配置文件。没有conf.d目录，直接mkdir 创建conf.d *.conf 详细可参考： server { listen 80; server_name 192.168.5.110; #项目域名 root /z/workspace/builduis/web-a/dist; #.
多个vue项目如何用nginx部署在同一端口下
mr_jhc的博客
06-15 3072
如题，项目部署我们都经历过，这个过程也是十面埋坑。其实部署vue应用比较简单了现在，特别是cli3出来后，比以前要容易多了。这里记录一次在nginx同一端口下部署多个vue应用的过程。nginx用来做代理很好用，可以解决跨域问题。 那么，如何在一个端口号下部署多个应用呢？这个需求有什么用？比如你的一个服务器上部署了很多应用，各个项目的，每个都占用一个端口，那可能现在还要映射到外网去，方便给客户演示。这个资源总是有限的，所以如果能省一个端口最好就省一个。特别是像一个项目里有多个子系统，各系统又是独立开发的，这
Vue+Nginx实现同域名下部署多个vue项目
怎么办我好菜啊
09-02 2043
vue+nginx实现同域名多项目
nginx部署多个vue项目
07-27
要在Nginx上部署多个Vue项目，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了Nginx。如果尚未安装，请根据你的操作系统的要求进行安装。 2. 在Nginx的配置文件夹中创建一个新的配置文件，比如 `/etc/nginx/conf.d`。在该文件夹中创建一个名为 `myproject.conf` 的文件，用于配置你的项目。 3. 打开 `myproject.conf` 文件，并输入以下内容： ``` server { listen 80; server_name your_domain.com; // 替换为你的域名或IP地址 location /project1 { alias /path/to/project1/dist; // 替换为第一个Vue项目的dist目录路径 try_files $uri $uri/ /project1/index.html; } location /project2 { alias /path/to/project2/dist; // 替换为第二个Vue项目的dist目录路径 try_files $uri $uri/ /project2/index.html; } // 可以继续添加其他项目的配置 error_page 404 /index.html; } ``` 上述配置中，我们使用了 `alias` 指令将每个项目的 `dist` 目录映射到对应的路径。`try_files` 指令用于处理路由请求，确保能够正确访问到每个Vue项目的路由。 4. 保存并关闭文件。 5. 检查配置文件是否存在语法错误：执行 `nginx -t` 命令。 6. 如果没有错误，重新加载Nginx配置文件：执行 `sudo service nginx reload`（根据你的操作系统和Nginx安装方式可能会有所不同）。 7. 确保你的域名或IP地址正确解析到服务器，并尝试访问 `http://your_domain.com/project1` 和 `http://your_domain.com/project2`，应该能够分别访问到两个Vue项目。 按照上述步骤，你可以配置Nginx来部署多个Vue项目。你可以根据需要添加更多的项目配置。在配置完成后，确保每个项目的 `dist` 目录已经构建并位于正确的路径上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值