前端工程的打包部署（这里用的nginx）

最新推荐文章于 2025-10-17 16:11:46 发布
原创 最新推荐文章于 2025-10-17 16:11:46 发布 · 1.6k 阅读 · 6 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章讲述了如何使用Visual工具打包前端项目，然后下载并安装Nginx，确保路径无中文，将打包后的文件放入Nginx的html目录。接着，通过修改nginx.conf配置文件设置端口，并调整location以指向前端工程文件，最后启动Nginx服务。

1. 首先，需要将前端文件打包。这里使用的是visual.

在这里插入图片描述

2. 官网下载nginx

3.将打包好的前端文件放入nginx中的html文件夹

在这里插入图片描述
需要注意的是，在存储nginx的时候，不要有中文的路径

3. 双击nginx.exe就可以启动进程，但在使用前，需要修改一些配置

  1. 进入conf
  2. 打开ngix.conf
    在这里插入图片描述
    server为端口设置，如果使用的端口号被占用，可以在这里修改

location,为nginx进程启动后，需要在当前nigix文件存放的路径下，寻找要访问的路径，即访问打包的前端工程文件

标签
#nginx
nginx部署前端项目完整步骤（非容器化部署）
一枚小爪哇(Java)的博客
03-07 3156
nginx部署前端项目完整步骤（非容器化部署）
使用 Nginx部署前端项目
blue_121的博客
05-23 3444
windows系统右键我们下方任务栏的黑色部分，打开任务管理器，看下nginx是否启动。，这是一个非常重要的文件，用来配置nginx服务器，默认的配置也存放在此。以windows版为例，下载后，将其解压到 本地的任一目录下；，把解压的文件放在里面，此时我们可以看到有如下目录。然后用vscode代码编辑器打开解压文件夹下的。
nginx部署前端教程
niulinbiao的博客
04-07 3577
一般来说现在的软件项目，都是分用户端以及管理端的，并且是前后端分离的，这里我来记录一下部署两个前端的教程。部署前端之前需要的准备工作是部署springBoot后端程序，这里我来对后端程序进行部署docker compose部署springboot+redis+mysql这里我的后端接口地址为centos安装nginx准备还以上的工具就可以继续往下走了。
黑马JavaWeb开发笔记10(前端完结)——Vue路由介绍&入门、前端工程打包、nginx前端部署
apple_68589597的博客
08-29 1473
本篇文章是2023年最新黑马JavaWeb开发笔记10：Vue路由介绍&入门、前端工程打包、nginx前端部署的总结，帮助需要学习Web开发的朋友温故而知新。
前端开发者必备：Nginx部署前端项目，让你的Web应用快速、稳定、安全地运行
热门推荐
失忆老幺
04-04 1万+
Nginx部署前端项目
Nginx 打包上线 nginx.conf文件配置
路虽远行则将至，事虽难做则必成。
12-03 1596
打包上线其实就是，我们有一个服务器绑定了域名，然后在通过Nginx部署代码，这样就可以域名访问项目。在打包上线之前我们应该知道，开发常见的三种环境，本地环境，生产环境，测试环境。参考文章参考文章NginxNginx官网下载Nginx中文网Nginx配置中文参考手册实际应用1.我们现在实际情况是一个服务器绑定域名，只放一个项目的情况下。通过Nginx部署，域名进行访问项目。2.我们进行项目生产环境打包，在打包之后我们可以理解为Nginx的nginx.conf文件就相当于了我们本地开发环境的vue.config
前端工程打包部署（nginx）
weixin_53152314的博客
04-08 490
将打包好的dist文件夹里的文件复制到nginx里的html里（html里可能会有些初始文件，可以删除）nginx默认的端口号为80，如果被其他进程占用，可以更换一下端口号或者结束占用端口的进程。浏览器里输入 localhost:80 回车即可。双击nginx.exe即可运行部署在nginx上的前端工程。（可以到任务管理器中查看是否已经运行nginx）查看进程pid，然后到任务管理器里结束掉他。以下是nginx一些文件的作用。打包后文件放在dist目录下。
nginx 部署前端项目的详细步骤（vue项目build打包+nginx部署）_前端工程打包部署到nginx
m0_61068496的博客
04-21 3640
以我的为例：server# http版本#̲ 继承地址，这里的http_upgrade为上面的proxy_pass# 传递的ip。
前端工程化（YApi，Node.Js，VueCLI，项目打包部署（Nginx部署））简介
2303_80480614的博客
08-02 1128
Author：Dawn_T17🥥 前后端分离开发是当前主流的应用开发模式之一。在这种模式下，前端和后端的开发工作被明确划分开来，各自专注于自己的领域。 前端主要负责用户界面的设计和交互体验的实现。使用 HTML、CSS 和 JavaScript 等技术构建页面，通过各种前端框架（如 Vue.js、React、Angular 等）来提高开发效率和用户体验。前端通过发送 HTTP 请求与后端进行数据交互。 ​
nextjs前端工程如何打包部署（nginx）
最新发布
徐同保的专栏
10-17 871
把【.next/server/app】目录下的所有文件复制到【/temp/test】文件夹下。1. nextjs打包后会生成多个html，而不是像vue打包后只生成一个html文件。把【.next】目录下的所有文件复制到【/temp/text/_next】文件夹下。需要通过nginx的try_files 指令。
搭建vue前端 - 打包vue工程部署到nginx下
Ho_mj的专栏
03-31 607
搭建vue前端 1. 安装nginx 1） 安装nginx 下载nginx的安装包：http://nginx.org/en/download.html 先安装一些依赖包：yum install pcre-devel zlib-devel -y 解压：tar -zxvf nginx-1.10.3.tar.gz 去解压目录：cd nginx-1.10.3 执行配置： ./configure --pr...
nginx 部署前端项目的详细步骤（vue项目build打包+nginx部署）_前端工程打包部署到nginx(2)
2401_84437170的博客
04-28 725
函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；
Javaweb之前端工程打包部署的详细解析
qq_69748833的博客
12-05 601
nginx: Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。niginx在windows中的安装是比较方便的，直接解压即可。所以我们直接将资料中的nginx-1.22.0.zip压缩文件拷贝到无中文的目录下很明显，我们如果要发布，直接将资源放入到html目录中。
VUE前端工程打包部署，Nginx做服务器进行代理访问
程序员精进之路
01-30 5142
1.vue前端工程打包 cd projectName cnpm run build 执行成功后，在项目中会生成一个文件夹dist，此文件夹里面的内容就是打包好的部署内容包 将打包好的内容上传到服务器 /usr/data/www/dist 2.Nginx配置 cd /usr/local/nginx vim nginx.conf 3.重启Nginx服务，测试是否实现代...
JavaWeb——10 前端工程的打包部署
念头通达
03-05 222
讲解了前端工程的打包和部署
Dockerfile打包部署
yxhsk8的博客
11-27 2211
先找到打包完的目录下创建一个Dockerfile文件进去文件内编写# 基础镜像# author# 挂载目录# 创建目录# 指定路径# 复制jar文件到路径# 启动认证服务保存并退出:wq!构建镜像(my-task -> 取一个镜像名字,构建镜像后面是有一个的)启动镜像-d 容器在后台运行-p 将宿主机的 8080 端口映射到容器的 8080 端口。--name 取一个容器名最后面的my-task指的是刚才打包的镜像名。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值