vue 部署项目到服务器 nginx为前端web容器 apache为api接口容器

最新推荐文章于 2025-04-06 07:30:00 发布

原创最新推荐文章于 2025-04-06 07:30:00 发布

· 1.4k 阅读

1 ·

版权

文章标签：

#vue部署 #nginx代理服务

技术文档专栏收录该内容

9 篇文章

订阅专栏

首先服务器装一个nginx 再装一个apache

nginx配置如下

直接访问tobcandy.top 访问的是vue前端

接口地址 tobcandy.top/api 会被代理到 http://127.0.0.1:8888/currency-identify/public/api/;

负载均衡就是通过nginx 做内容分发达到负载均衡

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_39070698

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue项目本地开发完成后部署到服务器后报404是什么原因呢？

yousuotu的博客

03-20

522

是一种网络应用程序或网站的模型，所有用户交互是通过动态重写当前页面，前面我们也看到了，不管我们应用有多少页面，构建物都只会产出一个。什么自动化，镜像，容器，流水线布署，本质也是将这套逻辑抽象，隔离，用程序来代替重复性的劳动，本文不展开。前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的构建物上传至目标服务器的。这是一个经典的问题，相信很多同学都有遇到过，那么你知道其真正的原因吗？产生问题的本质是因为我们的路由是通过JS来执行视图切换的，是没有相关配置的，所以就会出现 404 的情况。

很详细的服务器部署node和nginx详解

titoni_yunruohan的博客

08-16

3743

分享主目录 服务器安装node环境（前端必备，提供俩种详细的安装方式） 服务器安装nginx启动web服务（包括配置自己所需路径） 服务器nginx配置反向代理 服务器登录软件 FinalShell 下载链接http://www.hostbuf.com/downloads/finalshell_install.exe 方便：可以快捷的进入服务器的文件进行编辑，如下截图中，...

1 条评论您还未登录，请先登录后发表或查看评论

vue.js项目部署到服务器docker容器上

soullove01的博客

04-08

839

vue.js项目部署到服务器docker容器上网上看到大部分都是使用nginx镜像通过反向代理进行部署，但是我试过很多遍都没有部署成功，后面使用了node镜像部署。总结一下我使用node部署的步骤，如下：我这里vue项目名为bigdata，是通过远程服务器的docker进行部署,保存的目录在/root/vue/下 1、把项目bigdata通过xftp传到/root/vue目录下 2、拉取node镜像 #下载node镜像 docker pull node:alpine #查看镜像 docker imag

将打包好的VUE文件部署到Web容器（Nginx）中，解决接口调用跨域问题

chanbzou1981的博客

02-19

2353

背景 VUE项目开发（如何搭建VUE开发环境请参见：如何搭建VUE开发环境_chanbzou1981的博客-优快云博客）完成后需要部署发布，建议使用Nginx作为Web容器，因为支持反向代理，能方便地解决客户端跨域调用服务端接口的问题。什么时跨域：由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。下载并解压Nginx 下载稳定版本（nginx/Windows-1.20.2）即可。 Mainline version——主线版本 Stable v

5.7.前端Web 容器

最新发布

chxii的专栏

04-06

841

前端只是页面的展示和交互。需要后端控制业务逻辑的完整性、数据安全性及系统协同性。场景示例：用户A只能查看本部门数据，用户B可查看全公司数据场景示例：订单金额超过 1 万元需二次审批场景示例：电商库存扣减防止超卖后端为前端构建了安全、稳定、可扩展的数据交互环境。实际开发中，分为有 Web 容器的语言（php，java）和无 Web 容器的语言（Node.js、Go学习上，无 Web 容器的语言相对会更好一点。类别定义典型语言/框架。

Angular前端项目在Apache httpd服务器上的部署

hhujjj2005的博客

05-14

486

Tomcat是一个Java Servlet容器，用于运行Java Servlet和JavaServer Pages（JSP），而Apache HTTP服务器是一个通用的Web服务器，用于提供静态和动态内容。yum安装，安装简单，最新版本，本文用的yum安装。源代码安装，可以安装任何版本，配置灵活性比较高，但是安装麻烦。

前端新手 Vue应用部署到服务器的正确方式

IT修真院：初学者转行到互联网的聚集地

04-30

1472

作者简介：陈老师 5年多前端工作经验，主要分享：vue.js,等前端技术，微信开发公众号：H5前端开发社区掘金专栏：https://juejin.im/user/5901d6210ce463006153c6cc 页面出现空白现象，获取资源路径不对等，我相信以VueJs为技术栈来进行前端开发的小伙伴或多或少都会遇到这样的问题，我也遇到过，那现在我们就来一一解决这样的问题。很多时候我们发...

vue前后端分离项目部署，apache反向代理配置

facing-screen's blog

03-16

1635

vue前后端分离项目部署，vue前后端分离项目必然会出现前后端不同域问题，当然，你可以在前端拼接目标域并在后端处理好跨域，但更优雅的方式是给apache配置反向代理。部署步骤：把npm run build 构建生产的文件（dist目录里的所有文件）拷贝到服务器的某目录下；在apache的配置文件httpd.conf里添加一个虚拟主机（这个很简单，可以参考下面示例的VirtualHost标签

如何在阿里云端部署vue前端项目

02-22

假设用户用的是ECS，那么需要连接到服务器，安装Web服务器软件，比如Nginx或者Apache。可能还需要配置Nginx来指向打包后的dist目录。另外，如果用户使用的是OSS，步骤会更简单，直接上传文件到存储桶，然后开启静态...

WEB部署YOLOv5：Flask后端与VUE前端框架集成

同时，服务器端可能需要使用Nginx或Apache作为Web服务器，以及Gunicorn、uWSGI等WSGI服务器。 ### 总结文件所描述的项目是一个结合了Flask后端和VUE前端的Web应用，该应用部署了YOLOv5目标检测模型。该项目通过...

前端高频vue面试题合集

bb_xiaxia1998的博客

10-27

3417

Vue-Router有两种模式：hash模式和history模式。默认的路由模式是hash模式。简介： hash模式是开发中默认的模式，它的URL带着一个#特点：hash值会出现在URL里面，但是不会出现在HTTP请求中，对后端完全没有影响。所以改变hash值，不会重新加载页面。这种模式的浏览器支持度很好，低版本的IE浏览器也支持这种模式。hash路由被称为是前端路由，已经成为SPA（单页面应用）的标配。原理： hash模式的主要原理就是onhashchange()事件：使用onhashchange()事

在nginx上部署vue项目(history模式)；

zhoumeina99的博客

09-28

2941

route history模式为什么要重定向页面

Apache和Tomcat的关系

简单点的博客

05-20

1485

Apache和Tomcat的关系

Apache 配置 WebSocket 协议

weixin_33721344的博客

11-30

768

本文使用 http proxy 方式实现 apache 支持 WebSocket 请求（JK 使用的 ajp 协议不能支持websocket）通过 apache 访问后端 tomcat上的 websocket 服务，需要使用 mod_proxy.so 和 mod_proxy_wstunnel.so两个库文件（在apache2.4 安装目录下已存在，放开httpd.conf文件中的注释即可...

部署webapp到web容器的三种方式（这里的web容器Tomcat）

海涛帅帅的博客

07-07

1574

* 部署项目的方式： 0.首先看看我们的例子 1. 直接将项目放到webapps目录下即可。 * /hello：项目的访问路径–>虚拟目录 * 简化部署：将项目打成一个war包，再将war包放置到webapps目录下。 * war包会自动解压缩 1.1直接把webapp的文件夹复制 1.2把webapp的war包放下面 1.3运行结果都是一样的 2. 配置conf/server.xm...

部署前端项目方法（Docker，Nginx，IIS，Tomcat7，Nodejs）

小白的编程之旅

09-13

6096

根据前段时间的学习，整理如下前端项目部署方法。错误，不足及新的部署方式欢迎在评论区中留言与我讨论。大家共同进步!(^_^)! 部署前端项目方法通过 Docker-Nginx-supervisor 部署在项目文件夹中新建 Dockerfile，内容如下： FROM ubuntu:14.04 ADD sources.list /etc/apt/sources.list...

前后端分离项目的怎么部署到阿里云上（配置篇）

qq_41767640的博客

05-03

3702

1首先是nginx部署vue项目下载nginx 第一步 //一键安装上面四个依赖 yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 第二步下载并解压nginx安装包 //创建一个文件夹 cd /usr/local mkdir nginx cd nginx //下载tar包 wget http://nginx...

Vue爬坑之旅（九）：vue打包后的线上部署Apache、nginx

帆酱的博客

01-13

7833

我们一般情况下将vue项目开发完成后会进行打包上线，本文介绍多种部署情况。一、Apache服务器 1、vue路由mode:'hash'模式（带#号模式） hash模式打包后可以直接丢到服务器上去，不会有路由上的问题，接口的话根据项目的路径写个全局配置就行了，这里不详细说。 2、vue路由mode:'history'模式（不带#号模式） vue在history模式打包时，如果项目为二级目...

几种前端web应用部署方式比较