如何通过Nginx部署前端项目？

最新推荐文章于 2025-03-20 16:22:16 发布
最新推荐文章于 2025-03-20 16:22:16 发布
阅读量411 收藏
点赞数 3
分类专栏： Nginx部署前端项目 文章标签： node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43714426/article/details/114869505
版权
本文档详细介绍了如何在Windows环境下使用Nginx部署Vue项目的过程，包括配置nodejs环境变量、安装依赖、打包生成dist目录等步骤，并提供了部署环境的配置示例。

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

这里写自定义目录标题

通过Nginx部署Vue项目，windows版

首先，确保nodejs环境变量没有问题：
查看nodejs版本

打包生成dist目录

  • 进入项目目录，windows可直接在项目目录下操作（即省去此步骤）
cd vue-element-admin
  • 安装依赖
npm install
  • 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
  • 打包，生成dist目录
npm run build:prod
  • 目录结构如下：
    在这里插入图片描述
  • 将打包文件复制到Nginx的html目录下
    在这里插入图片描述

部署环境

下载好Nginx后，配置config文件即可，如下：

在这里插入图片描述

启动Nginx，访问端口

在这里插入图片描述

Linux版参考如下链接

利用nginx简单部署前端项目
uncle_Huang的博客
06-04 1874
情况描述：前端项目是vue项目，把项目打包后部署到服务器上，服务器是linux系统。 需要用到的软件：Xshell，Xftp 适用对象：前端小白（大佬们就不要看了，写得一般般，羞羞） 首先本地用Xshell连接服务器 打开Xshell，点击文件-》新建 填写名称、主机和端口号。 点击用户身份验证，方法默认password，填写用户名和密码，点击确定。 连接后，查看服务器有没有安装nginx，输入 find / -name nginx 如果安装了，输入后按回车键，会显示nginx的安装路径，如下图
centOS系统环境如何安装nginx部署前端项目？
w597412819的博客
04-28 619
1、购买云服务器 https://www.aliyun.com/ 值得注意的是：在控制台中设置安全组，以备公网访问 2、通过SecureCRT来连接云服务分配的公网IP 3、准备nginx安装环境，安装依赖包 yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 注意：有可能提示找不到资源，需要修改yum源 4、下载并解压安装包 //创建一个文件夹 cd /home mkdir nginx cd nginx //下载t
nginx 部署前端项目
Amazing66的博客
12-27 1万+
1、首先将前端项目打包放在服务器上 2、修改nginx 配置文件
前端项目部署在 Nginx 中自定义配置文件和项目路径详解
最新发布
cuijiying的博客
03-20 1865
讲解如何将你的前端项目部署在 Nginx 中，并且自定义 Nginx 配置文件和前端项目路径的位置。首先，确保你的服务器上已经安装了 Nginx。如果需要 HTTPS，需要配置 SSL 证书并修改配置文件，这可以参考 Nginx 官方文档或后续教程。安装完成后，可以通过浏览器输入服务器的 IP 地址，检查是否看到 Nginx 的默认欢迎页面。Nginx 需要知道你的自定义配置文件位置，因此需要修改主配置文件。
使用nginx部署前端项目
lianaozhe的博客
11-25 5860
使用FileZilla或者其他工具上传前端项目到nginx的html目录。浏览器访问：http://43.139.56.13/czczz-admin。浏览器访问：http://localhost/czczz-admin。将我们要执行的项目同样放到nginx下html目录下。可以看到，成功访问到前端页面并且调用了后端的接口。这样，一个简单去前后端分离项目就部署完毕了！-p: 将容器的 端口映射到主机的端口。–name: 启动容器的名字。可以看到，访问成功了。在浏览器访问主机ip。nginx安装成功。
用Nginx部署前端项目
qq_69503426的博客
04-19 1549
然后将压缩包上传至虚拟机（需要下载Xsell和Xftp，Xsell-输入命令，Xftp-上传文件到虚拟机）点击i进行编辑，修改路径为dist在虚拟机上所在的位置，修改完成后按ECS,输入:wq即可退出（然后再依次输入以下命令（出现截图中的情况，则部署成功）需要上面两个安装包可以私信我，也可以通过其他途径下载。在浏览器中输入虚拟机端口号出现以下页面，则部署成功。（需要将第一个红色画框的内容全部“杀掉”才可以）:wq保存修改并退出，:q!以上运行内容过多，就不展示运行结果了。（出现以下内容，则还不可以）
使用nginx部署前端项目（超详细教程）.pdf
04-29
【使用Nginx部署前端项目】的教程是一个详尽的指南，主要面向初学者，旨在教会读者如何利用Nginx高效地部署前端应用。Nginx是一个高性能的Web服务器和反向代理，因其高并发处理能力和低内存占用而受到广泛青睐。 ...
windows环境如何安装nginx部署前端项目？
w597412819的博客
04-28 4385
nginx简介：nginx是一个高性能的HTTP和反向代理web服务器。 1、下载地址：nginx: download 选择windows版本 2、安装和启动 解压zip文件到当前目录，然后进入nginx-1.12.2目录，在地址栏输入cmd，进入终端窗口 执行命令 start nginx 窗口闪一下说明启动成功，在浏览器输入localhost出现如下界面说明启动成功 3、配置前端项目 前端静态项目myWeb丢到nginx-1.12.2\html目录下 进入nginx-1.12.2\conf目录
nginx部署前端项目 (Windows版)
weixin_43819028的博客
09-03 3059
本文介绍了如何在Windows系统上安装和配置nginx，以及如何创建和修改网站根目录和配置文件，以实现前端项目的部署。文章提供了超详细的操作和代码示例，以及相关的解释和注意事项
【Nginx 】Nginx 部署前端 vue 项目
m0_74825746的博客
01-17 1529
在两种系统中，安装Nginx的过程都相对简单，主要区别在于使用的软件包管理器不同。这包括访问Vue应用的主页，以及尝试访问应用中的各个路由，确保它们都能正确加载。文件中列出的依赖项进行下载和安装，这个过程通常需要联网操作，并且依赖于npm仓库的响应速度。在网络状况良好的情况下，安装过程可以顺利完成。在CentOS或RHEL系统上安装Nginx的过程与Ubuntu/Debian略有不同，主要体现在软件包管理器的使用上。在项目部署之前，确保开发环境中已安装Node.js和npm，这是运行Vue项目的基础。
使用 Nginx部署前端项目
blue_121的博客
05-23 3192
windows系统右键我们下方任务栏的黑色部分，打开任务管理器，看下nginx是否启动。，这是一个非常重要的文件，用来配置nginx服务器，默认的配置也存放在此。以windows版为例，下载后，将其解压到 本地的任一目录下；，把解压的文件放在里面，此时我们可以看到有如下目录。然后用vscode代码编辑器打开解压文件夹下的。
nginx部署前端教程
niulinbiao的博客
04-07 3317
一般来说现在的软件项目，都是分用户端以及管理端的，并且是前后端分离的，这里我来记录一下部署两个前端的教程。部署前端之前需要的准备工作是部署springBoot后端程序，这里我来对后端程序进行部署docker compose部署springboot+redis+mysql这里我的后端接口地址为centos安装nginx准备还以上的工具就可以继续往下走了。
用nginx部署前端项目
why404
08-28 427
前端项目nginx部署主要的配置基本上就是上面提到的这些。首先是location路由的四种写法；接着就是分清楚root和alias的区别；当项目较多时需要使用二级路由时，需要注意重定向的配置；如果你的项目文件较大，可以开启gzip压缩提升传输效率。
nginx部署前端项目详细教程
太阳与星辰的博客
09-06 8683
本文主要讲述了使用nginx打包部署前端项目的整套流程。
Nginx部署前端项目
吹灭读书灯 一身都是月的博客
05-21 8785
首先当然是检查Nginx： 查看nginx的安装路径：whereis nginx nginx: /usr/local/nginx nginx常用命令： cd /usr/local/nginx/sbin ./nginx ./nginx -s stop ./nginx -s quit 安全退出 ./nginx -s reload 重新加载配置文件 ps aux | grep nginx nginx展示图片： location /images { root /us
nginx部署前端项目
抽象的螺旋
05-11 1798
这里简单记录一下自己部署前端项目的过程。
快速掌握Nginx部署前端项目（从Nginx安装配置及部署都非常详细哦！）
热门推荐
m0_67477525的博客
10-28 1万+
之前在Linux系统中部署了后端项目，今天继续来给大家分享如何部署前端项目。涉及到了Nginx的简单介绍以及Nginx如何安装及配置并且能够部署前端项目Nginx是一个轻量级的反向代理web服务器，在当今应用地非常广泛，特别是前后端分离的情况下。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值