nginx一个端口多个vue项目

最新推荐文章于 2024-07-23 15:45:06 发布
最新推荐文章于 2024-07-23 15:45:06 发布
阅读量428 收藏 1
点赞数 1
分类专栏： vue学习 文章标签： nginx vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53353187/article/details/120483503
版权
本文介绍了如何使用Nginx在一个端口上部署多个Vue.js项目。通过修改nginx.conf配置文件，设置不同的server块，并调整Vue项目的publicPath。同时，为解决路由问题，建议在Vue Router中添加基础URL，并避免使用window.location.href，转而使用$router.push。注意，错误的try_files配置可能导致500错误，需正确指定前端代码路径。
摘要由CSDN通过智能技术生成
最低0.47元/天 解锁文章
喜欢吃爆米花的小叶子
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Nginx一个端口部署多个vue项目
out有点man的博客
06-11 1079
由于公司服务器前两天被攻击，阿里云服务器直接把公司服务器给关停了，刚好上面没有什么特别重要的数据，就直接格式化了，之前部署的好几个演示版本项目，是监听多个端口来部署的，本次上级只让开一个端口部署，所以研究了半天，记录下成果。 环境 vue2.x vue-cli 4.4.6 vue-router 3.1.3 配置vue.config.js文件 配置publicPath 对应后面nginx路径，这里添加的目的是其他静态资源文件统一前缀路径 修改路由配置 注意这个 和上面的一致，为nginx lo
Nginx同端口部署多个vue，unapp项目
weixin_50061268的博客
01-08 516
同一个端口部署pc和app端项目，Nginx配置，前端打包配置。
Nginx一个端口代理多个vue项目，通过不同路由转到不同系统，反向代理Apache进行文件处理
风不知从何处起的小屋
05-31 569
这里将多个vue项目通过一个nginx端口进行代理，由不同的路由来确定访问哪些项目，apache同理。
Nginx同一端口部署多个vue项目
jacob20130的博客
06-20 3979
Nginx同一端口部署多个vue项目
nginx配置同一域名同一端口下部署多个vue项目
strggle_bin的博客
04-18 691
调整完毕后，直接执行build打包命令，可以发现index.html引入js路径增加了/project。在vue.config.js文件中修改publicPath路径为/project/在router文件夹中index.js文件中修改base为 ‘/project/’如果页面中有二级路由的话，配置文件中一定不能用root，要用alias.默认端口就只有一个，有多个项目需要部署到同一端口下。根据根路径不同分别代理访问不同项目。
nginx同一端口部署多个vue项目
qq_44178552的博客
11-30 3716
nginx同一端口部署过个vue项目背景nginx配置文件功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 背景 因该应用嵌入在企业微信中，且企业微信中内置的网页应用配置主页需要二级域名所以导致测试新增功能时还须使用原有域名，这就导
Nginx同一端口下部署多个vue项目
qq_49206255的博客
03-18 1061
Vue项目打包后就变成了静态界面，在代码中动态配置的代理是不生效的，要注意默认配置。除了vue.config.js文件配置需要注意外，还有两个文件需要特别对待，分别是src-main.js、src-router-index.js文件，分别如图所示。跨域配置是根据配置进行拼接地址访问的，要注意请求后面的“/”，和跳转地址后的“/”，到现在重启nginx就可以访问了。根据不同项目的vue部署需求，可以在同一地址下的同一端口进行配置，配置完毕就可以访问vue前端项目了。在同一ip同一端口下部署一个vue项目。
nginx一个端口部署多个vue项目
qq_38255367的博客
12-25 1638
nginx一个端口部署多个vue项目vue.config.js中publicPath参数配置路由中base参数配置index.html中配置metanginx配置,conf目录下nginx.conf文件 vue.config.js中publicPath参数配置 /** * publicPath参数官方说明： * 部署应用包时的基本 URL, 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上例如 https://www.my-app.com/。 * 如果应用被部署在一个子路径上，
nginx 在同端口下，配置多个vue项目
yaoxie1534的博客
02-10 2973
步骤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项目的方法示例
10-14
在本文中，我们将深入探讨...通过以上步骤，你应该能够成功地在同一个Nginx服务器上部署并运行多个Vue.js项目。记住，每个项目都需要根据其特定的路径进行相应的配置，以便Nginx能够正确地转发请求到相应的静态文件。
Vue-cli项目部署到Nginx服务器的方法
10-16
- 如果你需要在同一台 Nginx 服务器上部署多个 Vue CLI 项目，可以通过修改每个项目的 `vue.config.js` 文件中的 `publicPath`，设置不同的前缀，如 `/vue1/` 和 `/vue2/`。 - 分别将每个项目的构建文件复制到对应...
nginx多服务器多端口配置
02-09
nginx多服务器多端口配置
Vue项目部署的实现（阿里云+Nginx代理+PM2）
12-12
Vue项目部署到阿里云ECS涉及的关键步骤...总结来说，Vue项目部署到阿里云ECS，涉及到前端构建、Nginx反向代理、PM2进程管理、跨域请求处理等多个环节，每个环节都需要细心配置和检查，以确保项目能正常运行并提供服务。
Python Formulas模型以JSON格式文件导出导入
最新发布
Humbunklung的专栏
07-23 350
Python Formulas库，JSON格式导出导入。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 315
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 312
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
【vueUse库Time模块各函数简介及使用方法--全篇】
xiejunlan的博客
07-23 747
vueUseTime函数基本使用示例实现使用方法注意假设的 `useTimeAgo` 函数使用方法。
vue v-bind：属性（简写是 ：属性）的正确用法
m0_47505062的博客
07-23 238
我有一个自定义组件 coolBtn ，我绑定了它的属性 name，如果只是单纯给它的属性 name 赋一个字符串的值，那么就应该写成。括起来的，表示这是一个变量，这个变量的值是需要到指定的地方去先找到变量 Ice，然后拿到变量里对应的值，最后再给到属性 name，括起来的，表示这是一个具体的值是一个字符串，可以直接赋给属性 name。也就是说，在 vue 的组件中，对其属性进行绑定（也就是赋值）的时候，但如果我想给它赋值一个变量而非某个具体的字符串值的时候，应该写成。，也可以是一个 具体的。
nginx 一个端口 部署 多个vue 项目
07-28
回答: 在nginx中，可以通过配置来实现一个端口部署多个vue项目。首先，在vue项目的vue.config.js文件中，需要配置publicPath参数，以及路由中的base参数，用来指定项目的访问路径。\[1\]接下来，在nginx的配置文件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值