前端Vue项目使用Nginx部署上线

最新推荐文章于 2025-04-17 00:34:57 发布

爬墙少年_OC

最新推荐文章于 2025-04-17 00:34:57 发布

阅读量1.4k

点赞数

分类专栏：项目部署 Vue 文章标签： nginx vue

本文链接：https://blog.youkuaiyun.com/weixin_43795006/article/details/106862628

版权

本文介绍了如何使用Nginx将Vue项目部署上线，包括npm run build打包，确保dist文件位于英文路径下，详细讲解了如何配置Nginx以适配Vue项目的pathRewrite，最后指导如何启动、重启和停止Nginx服务，以及访问本地部署的Vue应用。

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

1.npm run build打包
2.生成的dist文件最好放在英文路径下
3.配置nginx
vue官方文档
在这里插入图片描述
将此代码块放在nginx配置中进行修改

location / {
   
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;
}

4.nginx具体配置如下
1）如果vue项目中配置了pathRewrite: { ‘/api_permission’: ‘/’ },

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

爬墙少年_OC

关注关注

0
点赞
踩
5

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Golang Web开发- Gin不使用Nginx部署Vue项目

cui_win的专栏

05-26

593

当我们应用后端用Gin框架，前端使用Vue开发，那么在最后部署上线的时候，一般是前端Vue构建的dist目录的文件部署在Nginx上，Nginx反向代理到Gin后端代码。但是这样的部署方式略微繁琐，尤其只是临时启动下应用的时候，没必要再部署一个Nginx。下面我们将前端部署项目使用较多的结合Gin 框架实现前端构建产物和Gin打一个包部署。vue已经是目前最流行的前端开发方式了，对于Jquery，Layui这类对于小功能可以使用，稍微复杂的还是考虑使用vue进行前端开发。

前后端分离项目部署，vue--nagix发布部署，.net--API发布部署。

TangMonk的博客

07-23

590

连接池配置：pooling=true;

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

Nginx详细安装步骤（附部署前端Vue项目）

qq_34658021的博客

11-06

843

由于公司项目前后端分离，使用docker部署后端springboot项目了，前端的vue也需要使用到一个容器去承载，然而后端打包之后是一个文件夹直接请求一个html页面，所以选用Nginx代理跳转静态页面首先，我们先去Nginx官网http://nginx.org/en/download.html下载一个nginx安装包下载完之后通过Xftp将文件上传到服务器上边去。下载之前我们需...

Vue项目上线_nginx

ML.G的博客

04-14

272

准备：使用npm run build将Vue项目打包，得到一个dist文件夹，并上传到服务器。在服务器上安装nginx apt-get install nginx 配置/etc/nginx/nginx.conf文件配置：在http{}里添加server，server是虚拟主机配置，一个站点就是一个server server { listen 80 ssl; #...

如何将前端应用配置到 Nginx 以及常见问题的解决方法

最新发布

weixin_65696001的博客

04-17

1174

本文将介绍如何将前端应用部署到 Nginx 上，并分享一些在部署过程中可能遇到的问题以及如何解决它们。

前端vue项目简单部署于nginx

insist_life的博客

05-29

1305

表示监听前端服务器端口8080的端口，即在浏览器地址栏输入localhost:8080，即可访问html文件下dist文件夹中的index.html文件。# 会去nginx服务器下哪个位置寻找文件，下面的写法就是说在nginx下的html文件夹下的dist文件夹下的index.html。# 这边是配置了反向代理，当浏览器访问的是“/api”这个资源的时候，会访问3001端口的资源。# 这句话是为了在打开index页面后，再次刷新，浏览器报出404的问题。# 服务的ip为localhost。

部署vue项目到线上nginx

一条路走到黑

10-24

913

部署vue项目到nginx 1.项目打包打包完成以后就会在项目根目录生成一个dist的文件夹 npm run build 2.将打包以后的dist文件夹压缩为zip文件，然后ssh工具将dist.zip文件传输到服务器，传输成功以后将当前的dist.zip文件通过unzip dist.zip 解压修改nginx.conf 文件 server { listen 80; ...

Vue项目前端部署——nginx方式

qq_42900469的博客

07-03

9886

vue打包 nginx方式

SpringBoot整合Vue3上线部署（不使用Nginx）

weixin_52867888的博客

12-03

991

这种设计对于前端逻辑比较大的项目是非常友好的，但是对于只有一个或两个页面的前端测试项目，使用Nginx部署就显得略微麻烦，所以选择将前端项目和后端项目进行整合，使用Tomcat服务器进行部署上线效率就更加高效一点。+ 由于hash模式的#之后的路径信息不会传递到服务器中，所以如果部署在Tomcat服务器中，服务器就无需做任何配置。+ 前后端分离项目，前端一般是使用Nginx进行部署，后端直接使用SpringBoot内置的Tomcat服务器即可。#之后的路径信息不会参与请求，不会传递到服务器中。

vue3 项目部署，Nginx配置https,重定向，详细流程_vue3 前端项目ngnix配置

2401_84435700的博客

04-27

577

其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好。其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名。刚刚安装完成后，你的内容肯定是非常简洁的，你只需要配置对相应的参数，并可以通过保存按钮，基本是没有问题的。此时，nginx就已经安装好了，我们只需要点击nginx图标，点击配置文件选项即可使用ngnix了；一个web项目完成后，我们需要打包部署上线，关于打包的实战在我的。前端的部署，我们利用Nginx。

使用Nginx部署前端Vue项目

m0_70066267的博客

09-02

2006

使用Nginx部署Vue项目是一个相对简单且高效的过程。通过遵循上述步骤，你可以轻松地将Vue应用部署到生产环境中，并通过一些优化策略来提升应用的性能和用户体验。当然，随着Vue和Nginx的不断发展，可能会有更多的新特性和最佳实践出现，因此建议定期关注相关的社区和文档，以保持对最新技术的了解。

nginx下部署vue项目的方法步骤

09-29

主要介绍了nginx下部署vue项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vue打包部署nginx 配置

01-24

vue开发完毕，打包之后上线，传到nginx服务器配置问题解决

Vue项目部署到Nginx服务器

极限突破者的博客

05-17

3310

本文将详细介绍如何将Vue前端项目部署到Nginx服务器。Nginx是一款开源的高性能HTTP服务器和反向代理服务器。

Nginx部署前端Vue项目的深度解析

来自想要赚大钱的小周同学

10-21

2万+

学习目标：了解如何用Nginx部署前端Vue项目

vue前端项目上线配置

weixin_42539854的博客

04-07

1576

vue前端项目上线配置 1.准备云服务器建议使用阿里云、腾讯云、华为云、百度云自行官网购买或新人免费体验 2. 工具安装 xShell(远程连接工具) 新建会话主机：服务器公网IP，验证用户、密码完成连接 xFTP(文件传输工具) 3. 服务器nodejs安装在nodejs官网（https://nodejs.org/en/）找到对应版本，复制下载路径在xShell远程控制台输入： # mkdir /data/tools // 新建文件目录，保存安装包 # cd /data/to

【Nginx 】Nginx 部署前端 vue 项目

衍生星球的博客

09-06

1万+

在项目部署之前，确保开发环境中已安装Node.js和npm，这是运行Vue项目的基础。通过执行命令，可以安装项目所需的所有依赖。这一步是打包流程的前提，确保了后续编译的顺利进行。根据npm的官方数据，命令在安装依赖时，会根据文件中列出的依赖项进行下载和安装，这个过程通常需要联网操作，并且依赖于npm仓库的响应速度。在网络状况良好的情况下，安装过程可以顺利完成。

Vue Nginx 上线部署配置

molihuan的博客

03-28

290

Vue Nginx 部署配置请求后端404 页面空白页面刷新404 页面刷新空白

Vue项目部署上线全过程（保姆级教程）