如何将Vue项目部署到Nginx 服务器中

最新推荐文章于 2025-07-01 15:31:34 发布
最新推荐文章于 2025-07-01 15:31:34 发布
阅读量1.1w 收藏 9
点赞数 5
CC 4.0 BY-SA版权
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_35366269/article/details/91385689
本文详细介绍了如何将Vue应用部署到Nginx服务器。首先在本地执行打包命令，生成dist文件夹，然后通过ssh将dist.zip传输到服务器并解压。接着找到nginx.conf配置文件，进行相应配置，解决可能出现的403 Forbidden错误。最后，重新加载Nginx配置并使用服务器IP和端口访问项目。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

部署步骤：

1、先将Vue项目打包，在Vue项目的根目录执行如下命令

npm run build:prod

 

打包完成以后就会在项目根目录生成一个dist的文件夹

 

2、将打包以后的dist文件夹压缩为zip文件，然后ssh工具将dist.zip文件传输到服务器，传输成功以后将当前的dist.zip文件通过unzip dist.zip 解压

    Alt+p 快捷键打开linux 传输控制台，输入put dist.zip文件的绝对路径；例如：

 put D:\WebStormProject\flight-service-station-operational-service-system\dist.zip

 

出现如下图说明传输成功 

了解本专栏 订阅专栏 解锁全文 超级会员免费看
2022-07-17 vue项目-通用后台管理系统(十三) 将vue项目部署到nginx服务器上,宝塔面板介绍和使用
GAARA
07-17 576
一.vue项目打包并部署到nginx服务器(window环境) 1.项目打包 对于通过vue-cli脚手架创建的项目 在根目录cmd,并输入打包命令 2.nginx的html文件夹下粘贴打包好的项目文件 3.在有nginx.exe的页面cmd,输入命令开启服务器 4.其他 把dist文件中的文件粘贴到HTML文件夹下面 配置nginx 配置结束后重新加载 二.使用宝塔面板部署vue项目 1.宝塔面板介绍
如何将项目部署到服务器上(全套教程)
m0_55070913的博客
07-29 639
项目部署到服务器需要两个大步骤1、购买服务器(这里使用的是阿里云)2、配置环境(也是最麻烦的)如果是SpringBoot项目则不用配置tomcat如果不是SpringBoot项目则还需要配置tomcat3、使用nohupjava-jarxxx.jar&命令执行部署httpshttpshttpshttpshttpshttpshttpshttpshttpshttpshttpshttpshttpshttpshttps。...
vue项目如何部署到nginx服务器
热门推荐
田兴的博客
11-12 3万+
mac下安装nginx 安装工具： homebrew（还没用过的小伙伴可以点链接进行了解或者自行百度） 步骤： 1、打开终端，习惯性命令：更新 brew update 2、终端继续执行命令： brew search nginx //查询要安装的软件是否存在 3、这里我们多执行一步“废”命令，不过有利于我们后面的配置： brew info nginx 我们可以看到，nginx在本地还未安装（Not installed），nginx的来源（From），Docroot默认为/usr/local/v
Vue项目部署到Nginx服务器
极限突破者的博客
05-17 3362
本文将详细介绍如何将Vue前端项目部署到Nginx服务器。Nginx是一款开源的高性能HTTP服务器和反向代理服务器。
Nginx部署前端Vue项目
最新发布
2501_92635873的博客
07-01 866
通过以上步骤，你的Vue.js项目已经优雅地跑在Nginx上，从打包、上传到配置HTTPS，全程丝滑！Nginx不仅是你的“超级服务员”，还是安全和性能的保障。细心配置：Nginx的每行配置都是“指令”，写错了服务员会“罢工”。安全第一：HTTPS是标配，小锁一亮，用户和老板都夸你靠谱。日志为王：遇到问题别抓瞎，日志里藏着真相。现在，端起奶茶，打开浏览器，看看你的Vue应用在云端闪耀吧！部署成功的感觉，就像吃到刚出炉的蛋糕，甜到飞起！
vue 项目部署 在nginx上
weixin_45502613的博客
04-24 287
具体的下载请参考我的这篇博客点击跳转 npm run build 通过上面命令后打包好的静态资源将输出到dist目录中。如图所示： 修改nginx配置文件，配置文件为conf下的nginx.conf,修改nginx.conf中的server配置片段 server { server { listen 9999; #默认端口是80，如果端口没被占用...
vue项目部署到nginx服务器
weixin_43487252的博客
05-23 1万+
相信很多刚学习vue的朋友都可以进行到将vue项目进行npm run build这部，对于将build后的结果部署到nginx服务器上却一知半解，作者刚开始的时候也是很迷惑，看到网上很多朋友在问，今天作者就将自己的部署过程记录下来，供大家参考。 首先将开发完成的vue项目打包 // 在终端中cd到项目目录下 cd /usr/local/project // 进行项目构建（可在本地构建） np...
如何把项目部署到服务器
Akatsuki233的博客
02-18 386
1.怎么理解web服务器？  web服务器是服务器端的一种程序，用于解析请求并响应请求。 具体可看参考https://blog.youkuaiyun.com/perry1230/article/details/79105847 。 2. nginx就是一个web服务器程序，在监听 url，如果浏览器来了请求，那么就去服务器中找文件并响应给浏览器。 安装链接：http://wiki.ubuntu.o...
vue项目部署到nginx/tomcat服务器的实现
10-16
总结来说，Vue项目部署到Nginx或Tomcat服务器的主要步骤包括修改路由模式、配置服务器以处理history模式下的前端路由、打包Vue项目、在服务器上配置存放静态资源的目录，并确保web.xml中的错误处理设置能正确处理...
如何将vue项目部署到nginx服务器中
05-30
部署 Vue 项目到 Nginx 服务器中，可以按照以下步骤进行： 1. 将 Vue 项目打包成静态文件 使用命令 `npm run build` 或 `yarn build` 将 Vue 项目打包成静态文件。打包后的文件会生成在 `dist` 目录中。 2. 安装 ...
把项目部署到服务器的方法
qq_45958867的博客
02-24 8545
1.首先确保电脑中有Xshell和Xftp Xshell和Xftp免费下载地址 : https://www.netsarang.com/zh/free-for-home-school/ (需要填写正确的邮箱地址,提交后发送下载地址到邮箱中) 2.前端 1.在当前项目文件夹下,运行cmd,执行以下命令 npm run build 2.运行成功后,打开项目,会生成一个dist文件夹 3....
如何在服务器上部署项目
xuan__xia的博客
09-15 5296
这个renren-admin.jar，就是生成的jar包，我们将该jar包上传到/opt/modules/apache-tomcat-7.0.57/webapps目录下。在/opt/modules/nginx/conf目录下，修改nginx.conf的配置文件，修改内容如下图所示，修改后重启nginx服务即可。这里需要注意的是，再安装mysql-community-server时候，会报错，这个时候可以再命令后加上--nodes来执行。执行如下命令进行安装，如果出现其他问题，可自行百度。
部署项目到服务器
AbsenceOfTrace的博客
07-17 1002
1.修改配置文件2.打包生成war包 …… 2．1 使用Maven的命令进行打包 Maven命令 package -Dmaven.test.skip=true –Ponline   打包成功后可刷新工程在target目录下找到war包，也可以根据打包成功后提示的路径找到，如上图。
【vue】将项目部署到nginx
Withered Wood
10-09 657
文章目录Step1 打包Step2 修改配置文件Step3 查看网站nginx配置文件全部内容 Step1 打包 在项目终端打包，打包完成后会出现一个 dist 文件夹。 npm run build 将 dist 文件夹拷贝到 nginx 安装目录下的 html 文件夹中。 Step2 修改配置文件 对 nginx 进行反向代理，否则无法使用后端的api接口，会报跨域的错误。在 nginx 安装目录下的 conf/nginx.conf 配置反向代理。 修改配置如下： 取消 pid 的注释 pid
如何将自己的项目布置到服务器（Windows版）
it_is_me_a的博客
06-16 1万+
先说环境： 首先我的项目是一个springBoot项目，使用的编辑器是IDEA 我的本机环境是：Windows10, JDK 1.8.0, MySQL 8.0, tomcat 7.0.93 1.申请域名与服务器 我都是在阿里云上申请的。这一步我会写的简单一点，如果哪一步看不懂，建议直接百度哦！ 打开阿里云，进行注册 打开侧边栏的“域名与网站”，点击“域名注册”，进行页面进行域名注册。（如果只是试着玩玩，可以不申请域名注册。） 还是阿里云的首页地址，点击侧边栏的“弹性计算”，点击“云服务器ECS”，选择
项目部署到服务器
已黑化的小白的博客
04-21 290
已写好的网站项目的部署上线
SpringBoot项目如何部署到服务器上
SuchASilly的博客
05-11 3587
SpringBoot项目如何部署到服务器上 一、打成war包部署 这个不多BB，我有一篇博客专门讲war包部署到tomcat的，注意pom文件要写war即可 <packaging>war</packaging> 详情看这篇博客https://blog.youkuaiyun.com/SuchASilly/article/details/105244155 二、官方推荐jar包 1.使用maven工具，可以使用idea的终端terminal或者直接右边点开maven 使用clean清理，然后再p
部署项目到远程服务器
u010676540的专栏
12-19 2648
将项目部署到远程服务器： 1、将项目打包成.war（确保项目里面能正确访问数据库）。 2、这里使用SecureCRT工具，在上传.war文件之前删除webapps下存在的项目文件。 ps -ef |grep tomcat (查看进程，可能有2个) kill -9 pid（杀死第一个pid，若没有2个，就杀第一个） rm -rf erp erp.war（在上传.war文件之前删除web
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

郭宝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值