nginx同一端口部署不同vue项目

最新推荐文章于 2024-07-04 10:29:00 发布
原创 最新推荐文章于 2024-07-04 10:29:00 发布 · 559 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #nginx

在vue.config.js中设置publicPath为/S1E2，然后在router/index.js里添加base同样为/S1E2。接着，将打包后的应用重命名为S1E2并置于HTML目录下，最后更新Nginx配置，通过IP:86/S1E2可访问应用。

1. 添加publicPath

vue.config.js文件中添加 publicPath: “/S1E2” 配置
在这里插入图片描述

2. 添加base

router/index.js文件中添加 base: “/S1E2” 配置
在这里插入图片描述

3. nginx配置

① 将打完的包重名为S1E2
② 将包放到/html/目录下
③ 修改配置
在这里插入图片描述
④ 使用ip:86/S1E2访问即可

o0麦嘎
关注
nginx配置同一域名同一端口下部署多个vue项目
strggle_bin的博客
04-18 2188
调整完毕后，直接执行build打包命令，可以发现index.html引入js路径增加了/project。在vue.config.js文件中修改publicPath路径为/project/在router文件夹中index.js文件中修改base为 ‘/project/’如果页面中有二级路由的话，配置文件中一定不能用root，要用alias.默认端口就只有一个，有多个项目需要部署到同一端口下。根据根路径不同分别代理访问不同项目。
Nginx同一个端口部署多个vue项目
resuper0的博客
08-03 6303
Nginx同一个端口部署多个vue项目，亲测有效
Nginx同一端口部署多个前后端分离的vue项目
u010797364的博客
03-09 7277
nginx 一个端口部署多个vue项目
Nginx同一端口下部署多个vue项目
qq_49206255的博客
03-18 1666
Vue项目打包后就变成了静态界面，在代码中动态配置的代理是不生效的，要注意默认配置。除了vue.config.js文件配置需要注意外，还有两个文件需要特别对待，分别是src-main.js、src-router-index.js文件，分别如图所示。跨域配置是根据配置进行拼接地址访问的，要注意请求后面的“/”，和跳转地址后的“/”，到现在重启nginx就可以访问了。根据不同项目的vue部署需求，可以在同一地址下的同一端口进行配置，配置完毕就可以访问vue前端项目了。在同一ip同一端口下部署一个vue项目。
nginx同一端口部署多个vue项目
qq_44178552的博客
11-30 4088
nginx同一端口部署过个vue项目背景nginx配置文件功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 背景 因该应用嵌入在企业微信中，且企业微信中内置的网页应用配置主页需要二级域名所以导致测试新增功能时还须使用原有域名，这就导
nginx同一域名同一端口部署多个vue项目之前端操作
zhangxiaodui的博客
03-03 3632
场景 上个月遇到了我们的后端同事需要将多个vue项目部署到同一域名同一端口下，下面记录一下当时我们两个里面前端的操作有哪些。 例如有一个产品，它分为3个产品模块，有三个vue的项目想部署到同一域名下 访问路径想为如下所示： xxx.xxx.com:8089/productA xxx.xxx.com:8089/productB xxx.xxx.com:8089/productC 方法 前端我进行了3个操作，剩余nginx那里由后端来处理 1.public/index.html文件 head标签里加入如下代码
Nginx 同一端口下部署多个 Vue3 项目
默存
10-17 2984
前端多项目部署到 Nginx 的同一监听端口下的解决方案，项目由一个主项目和多个子项目组成，主项目和子项目都是单独打包。主子项目之间是使用的腾讯开源的无界（WebComponent 容器 + iframe 沙箱）前端框架，能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等。
nginx部署多个vue项目的方法示例
10-14
在本文中，我们将深入探讨如何使用Nginx部署多个Vue.js项目。这通常在需要在同一域名下运行多个独立的应用程序时变得必要。我们将通过一个具体的示例来展示配置过程。 首先，我们的目标是在同一个域名下部署两个Vue...
nginx同一域名部署多个vue项目_MQ
weixin_42588676的博客
01-16 3135
nginx同一域名部署多个vue项目_MQ 1、第一个项目正常打包部署，第二个及以上的项目需要设置项目访问路径（请求路径） 第一个正常打包即可 访问时只需要输入域名 ：www.xxx.com; 第二个项目访问路径为：www.xxx.com/bi; 2、项目添加前缀 （1）配置文件添加 （2）路由添加 （3）打包好后index.html页面添加 <meta base=/bi/> <meta base=你的前缀> 3、打包部署 4、nginx配置 server {
Nginx同一端口部署多个vue项目
jacob20130的博客
06-20 4368
Nginx同一端口部署多个vue项目
【Nginx】部署多个项目；vue打包项目部署设置子路径访问；一个根域名（端口）配置多个子项目
北海_南风
07-04 2170
本文解决： - vue打包项目部署设置子路径访问； - nginx部署多个子项目； - 一个ip/域名 端口 配置多个子项目； - 配置后，项目能访问，但是刷新页面就丢失的问题
nginx一个端口多个vue项目
m0_53353187的博客
09-26 650
主要参考博客 Nginx一个端口部署多个vue项目_out有点man的博客-优快云博客 修改nginx配置文件: cd /tools/nginx-1.14.2/conf vi nginx.conf 一个server{}配置,端口为9080，配置如下： nginx配置完成后: 用命令：ps –ef|grep nginx Kill -9 xxx 启动：/...
nginx 在同端口下，配置多个vue项目
yaoxie1534的博客
02-10 3110
步骤1：前端修改代码 1. 修改router/index.js 增加一项base,名字和文件夹名保持一致，在接下来的nginx配置中有用 import Vue from 'vue' import Router from 'vue-router' import Index from '@/components/Index' Vue.use(Router) export default new Router({ mode: 'history', base: '/stress', r.
Nginx同端口部署多个vue，unapp项目
weixin_50061268的博客
01-08 1115
同一个端口部署pc和app端项目，Nginx配置，前端打包配置。
nginx部署vue项目：多个项目、相同的端口下
~牧马~
07-11 3320
nginx部署vue项目单个或多个 首先，你得有一台服务器，并配置好nginx后，开始部署。 操作命令： 第一步： cd /home/local/nginx //#切换到nginx存放（安装）的位置 第二步; 第二步： ll #打印nginx下的所有文件及文本，你会看到 `conf` `sbin`这两个文件， 第三步： 第三步： cd conf #切换到conf文件，看到fastcgi.conf fastcgi.conf.default #fastcgi_pa
Nginx一个端口部署多个vue项目
out有点man的博客
06-11 1242
由于公司服务器前两天被攻击，阿里云服务器直接把公司服务器给关停了，刚好上面没有什么特别重要的数据，就直接格式化了，之前部署的好几个演示版本项目，是监听多个端口来部署的，本次上级只让开一个端口部署，所以研究了半天，记录下成果。 环境 vue2.x vue-cli 4.4.6 vue-router 3.1.3 配置vue.config.js文件 配置publicPath 对应后面nginx路径，这里添加的目的是其他静态资源文件统一前缀路径 修改路由配置 注意这个 和上面的一致，为nginx lo
nginx配置多个vue项目
BluerCat的博客
06-14 5458
如何在nginx配置多个vue项目？第一种是使用不同的端口，既配置多个server即可。第二种是同一个端口，既在一个server里面配置多个vue项目。多个端口，只需要调整nginx配置，若使用同一个端口，则需要稍微调整一下vue打包配置。
nginx同一端口下部署多个vue应用
xuxiake的博客世界
07-20 2425
使用webpack开发的vue 1.编辑 config/index.js 在build对象下添加assetsPublicPath: ‘/应用表示/‘（就是url后面跟的标识，https://blog.csdn.net/qq_31075763/article/details/89554859, 类似qq_31075763标识）。 2.编辑router/index.js 在Router对象定义下添加b...
nginx同一域名同一端口部署多个前端项目
最新发布
12-27
### 配置Nginx以实现在同一域名和端口上托管多个前端应用 #### 修改站点配置文件 为了在同一域名和端口下使用 Nginx 托管多个前端应用程序，需编辑位于 `/etc/nginx/sites-enabled/` 下的配置文件。对于默认设置而言，则应修改名为 `default` 的文件[^1]。 #### 定义不同路径映射至各前端项目 在该配置文件内，可以通过定义不同的 location 块来指定各个前端项目的根目录以及处理静态资源请求的方式： ```nginx server { listen 80; server_name yourdomain.com; # 第一个前端应用 location /app1/ { alias /path/to/app1/dist/; try_files $uri $uri/ /index.html; } # 第二个前端应用 location /app2/ { alias /path/to/app2/dist/; try_files $uri $uri/ /index.html; } } ``` 上述示例展示了两个前端应用分别挂载到了 `/app1/` 和 `/app2/` 这样的 URL 路径之下，并指定了各自构建后的输出文件夹位置作为服务源。同时利用 `try_files` 指令确保即使访问不存在的具体页面也能正确加载单页应用 (SPA)[^3]。 #### 处理 HTML5 History Mode 中的路由问题 当采用 Vue Router 并启用 history 模式时，在刷新浏览器或直接输入地址栏中的深层链接时可能出现找不到对应资源的情况。此时可以在每个location块中加入如下指令解决此问题: ```nginx location /appX/ { ... try_files $uri $uri/ /appX/index.html; } ``` 其中 X 表示具体的应用编号，这会使得任何未匹配到实际存在的文件或目录的情况下都返回 index.html 文件从而让前端框架接管后续的路由解析工作[^4]。 完成以上更改之后保存并关闭文件，最后执行命令重启 Nginx 即可使新的配置生效。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值