Nginx部署VUE前端页面（图文解说详细版）

原创 已于 2022-07-14 10:36:46 修改 · 7k 阅读 · 33 ·
CC 4.0 BY-SA版权
本内容最终版权归csdn博主掉头发的王富贵所有，本文为博主原创文章，未经博主允许不得转载。
文章标签：

#nginx #前端 #运维

于 2022-02-14 08:35:14 首次发布
本文详细阐述如何使用Nginx进行前端应用部署，包括打包前端文件、上传到Nginx、自定义配置、代理设置，以及启动和访问步骤，旨在解决新手常遇的配置难题。

文章目录

如果你还没有安装Nginx，请参考：

Linux安装Nginx

第一步，打包前端文件

npm run build

在这里插入图片描述

第二步，上传打包好的文件到Nginx的安装目录下的html

这里是使用的nginx的默认配置，如果需要自定义存放位置的话，可以去conf文件下的Nginx.conf去配置

在这里插入图片描述
在这里插入图片描述

第三步，自定义配置

在这里插入图片描述
在这里插入图片描述

第四步，配置Nginx代理

在这里插入图片描述
这里的前端对应的是这样的：
在这里插入图片描述
后端对应：

server.context-path 起到在ngnix分发中的作用

这个点非常重要！！

在这里插入图片描述
这里配置了我四个小时
在这里插入图片描述
在网上找到的全是乱七八糟的配置，哎。。。。。

第五步，启动Nginx

在这里插入图片描述
或者重启Nginx：

./nginx -s reload

第六步，访问你服务器的地址

在这里插入图片描述

Nginx部署前端静态网站详细教学（一步步操作）
Ghmin的博客
01-16 6316
从零开始使用Xshell、Xftp、Nginx 简单部署静态网站，需准备云服务器(阿里云、腾讯云、华为云等都可)
yum安装nginx，并部署前端vue项目到虚拟机上运行
weixin_44728473的博客
07-06 1596
yum安装nginx，并部署前端vue项目到虚拟机上运行 1.搜索一下有没有nginx，命令如下 yum search nginx2.查询nginx要安装的版本，命令如下 whereis nginx3.安装nginx，命令如下 yum install nginx.x86_644.移除nginx，命令如下 yum remove nginx5.打开目录，命令如下 cd /usr/sbin 6.启动，命令如下 ./nginx7.查看nginx进程，命令如下 ps -aux |grep nginx .......
Linux服务器Nginx部署前端全指南
最新发布
weixin_42543547的博客
10-11 567
访问服务器IP或域名，若看到“Welcome to nginx!”页面，说明安装成功。在安装Nginx之前，确保系统已安装必要的依赖库。（适用于基于Debian/Ubuntu的系统）编辑Nginx配置文件，通常位于。将前端项目打包后的文件（如。目录）上传到服务器，通常放在。确保Nginx用户（通常是。
轻松Docker+Nginx 部署Vue前端项目
aapprentice的博客
03-01 844
通过dockfile创建镜像,再通过镜像创建并运行容器,再修改nginx配置文件,即可轻松部署vue项目
【Nginx 】Nginx 部署前端 vue 项目
衍生星球的博客
09-06 1万+
在项目部署之前，确保开发环境中已安装Node.js和npm，这是运行Vue项目的基础。通过执行命令，可以安装项目所需的所有依赖。这一步是打包流程的前提，确保了后续编译的顺利进行。根据npm的官方数据，命令在安装依赖时，会根据文件中列出的依赖项进行下载和安装，这个过程通常需要联网操作，并且依赖于npm仓库的响应速度。在网络状况良好的情况下，安装过程可以顺利完成。
使用Nginx部署前端Vue项目
m0_70066267的博客
09-02 2132
使用Nginx部署Vue项目是一个相对简单且高效的过程。通过遵循上述步骤，你可以轻松地将Vue应用部署到生产环境中，并通过一些优化策略来提升应用的性能和用户体验。当然，随着Vue和Nginx的不断发展，可能会有更多的新特性和最佳实践出现，因此建议定期关注相关的社区和文档，以保持对最新技术的了解。
基于SSM与Vue的鲸落文化线上体验馆系统
综上所述，该项目集成了SSM框架的稳健后端服务、Vue.js的现代化前端交互、丰富的文化内容呈现以及完整的Web应用架构设计，涵盖了从前端页面渲染到后端业务逻辑处理、数据库交互、用户认证、API设计、系统部署等全...
你知不知道DeepSeek对话中像打字机一样的流式输出效果是怎么实现的？AI聊天项目实战经验:流式输出的前后端完整实现！(RAG,Langchain,Python)
Sonetto_一名大三小菜的经历分享，日更，讲述自身的、最贴切实际的知识分享
04-22 3679
来看这条简单清晰的逻辑链：LLMs_chain.astream(langchain中chain的API:流式输出LLM的一个个回复块「原料 chat_sew.stream_chat （生成器，转换chunk为初步的SSE格式字典「初步加工 产品） stream_response_generator(生成器，转换SSE协议字符串丨打包成快递) StreamingResponse(FastAPI用于流式传输响应体的响应类，以SSE协议发送 数据块到客户端|快递员） -> 「前端
面试官：你会怎么做前端web性能优化？我：.%*&.!
Sonetto_一名大三小菜的经历分享，日更，讲述自身的、最贴切实际的知识分享
04-30 1211
>面试话语：例如：页面有一个压缩图片功能，而这个功能的第三方库很大； > 这个功能用户不会立即使用、甚至可能不使用。将该功能异步加载
实现学习比赛两不误的英雄联盟比赛图文直播软件。.zip
10-01
10. **部署与运维**：可能涉及到Docker容器化部署，使用Nginx作为反向代理服务器，以及云服务如AWS或Google Cloud的使用。 通过研究这个项目源码，开发者不仅可以学习到上述各种技术的实践应用，还可以了解到如何将...
微博网站制作解说
03-15
然后，技术栈方面，前端可能需要React或Vue这样的框架，后端的话，Java或Python都比较常见，比如Spring Boot或Django。数据库的话，关系型数据库如MySQL用于结构化数据，Redis做缓存，消息队列可能用Kafka处理高并发...
Nginx部署前端Vue项目
2501_92635873的博客
07-01 1313
通过以上步骤，你的Vue.js项目已经优雅地跑在Nginx上，从打包、上传到配置HTTPS，全程丝滑！Nginx不仅是你的“超级服务员”，还是安全和性能的保障。细心配置：Nginx的每行配置都是“指令”，写错了服务员会“罢工”。安全第一：HTTPS是标配，小锁一亮，用户和老板都夸你靠谱。日志为王：遇到问题别抓瞎，日志里藏着真相。现在，端起奶茶，打开浏览器，看看你的Vue应用在云端闪耀吧！部署成功的感觉，就像吃到刚出炉的蛋糕，甜到飞起！
Nginx部署Vue前端项目
he先森的博客
12-01 4511
系统环境：Mac Pro—10.15.7版本Nginx版本：1.19.6。
Vue项目前端部署——nginx方式
qq_42900469的博客
07-03 1万+
vue打包 nginx方式
nginx: 部署前端项目的详细步骤（vue项目build打包+nginx部署）
热门推荐
qq_45796592的博客
09-26 2万+
nginx部署前端项目的详细步骤
nginx部署前端vue项目
破损的天堂鸟博客
09-02 2137
在Nginx配置文件中定义一个或多个后端服务器组（upstream），并指定这些服务器的地址和端口。
nginx部署前端Vue项目
永恩&猫咪的博客
04-28 626
记录一下自己用nginx部署前端Vue的过程 打包 npm run build 出现一些提示 Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work. 这个我没遇到什么问题，不是报错就行。 但是打完包之后 直接点开生成的index.html页面 却发现是空白页，然后查阅发现是config文件中的index.js问题 将assetsPublicPa
nginx部署vue前端项目
11-12
Nginx是一个强大的Web服务器，常用于静态文件的分发和服务代理，非常适合部署Vue前端项目。以下是简单的步骤： 1. **安装Nginx**：确保你已经在服务器上安装了Nginx，如果没有，可以访问Nginx官网下载适合你操作系统的版本，并按照指示进行安装。 2. **配置Nginx**： - 创建或编辑Nginx的站点配置文件（如`/etc/nginx/sites-available/example.com.conf`），内容通常包括以下部分： ```nginx server { listen 80; server_name example.com; # 替换为你项目的域名 location / { root /path/to/your/vue/app; # 将这里的路径替换为你的Vue应用的实际目录 index index.html index.htm; try_files $uri $uri/ =404; } # 其他可能需要的配置，如SSL支持、gzip压缩等 # 如果有子目录结构，可以添加location块来分别处理 } ``` 3. **启用站点**： - 使用`sudo ln -s sites-available/example.com sites-enabled/`命令将配置文件链接到sites-enabled目录，使其生效。 4. **重启Nginx**： ```bash sudo service nginx restart ``` 5. **部署Vue项目**： - 将Vue构建后的dist文件夹上传到配置文件指定的root路径下。 - 确保运行`npm run build`或类似命令生成静态文件。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

掉头发的王富贵

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

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

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

打赏作者

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

抵扣说明：

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

余额充值