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

最新推荐文章于 2025-03-22 08:57:26 发布
原创 最新推荐文章于 2025-03-22 08:57:26 发布 · 1.5k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#nginx

文章讲述了如何使用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文件存放的路径下，寻找要访问的路径，即访问打包的前端工程文件

Hey_米氏胡
关注
nginx部署前端项目完整步骤（非容器化部署）
一枚小爪哇(Java)的博客
03-07 2985
nginx部署前端项目完整步骤（非容器化部署）
配置Nginx部署前端打包静态文件
最新发布
m0_65525717的博客
09-28 940
本文介绍了在部署过程中遇到的前后端容器网络不通问题及解决方案。原方案使用Docker部署Nginx容器运行前端静态文件，但在配置SSL证书时发现前后端容器网络不通。最终改为在服务器本地安装Nginx部署前端，保留后端Docker容器，利用服务器与容器间的网络连通性解决问题。文中详细展示了Nginx配置文件，包括HTTPS服务配置(443端口)、前端静态文件目录设置、API反向代理(/api路径)以及HTTP重定向配置(8084端口)。重点说明了如何通过SSL证书挂载、路径配置和请求转发实现HTTPS安全访问
nginx: 部署前端项目的详细步骤（vue项目build打包+nginx部署）
热门推荐
qq_45796592的博客
09-26 2万+
nginx部署前端项目的详细步骤
Nginx部署前端
m0_56966134的博客
11-06 1928
shide nginx 安装说明操作Nginx命令编写Nginx配置实现反向代理发布前端项目实现负载均衡 nginx 安装说明 一、下载 nginx download https://nginx.org/en/download.html 二、解压，双击nginx.exe，如图 三、访问80端口查看，如图证明启动成功 四、如果没反应，说明80端口号被专用，可以先杀死80端口 netstat -ano | findstr “80”(查看占用80端口的进程号) 打开任务管理器，找到PID(进程号)为78
Nginx打包和部署
qq_59076775的博客
08-10 580
Nginx的打包和部署
前端项目打包并部署
喵酱
04-12 1万+
在当前项目路径下，执行命令在当前项目路径下，生成 一个dist文件夹。将来部署项目，是部署的dist这个文件。
前端项目打包部署
cyt涛的博客
09-21 4856
项目打包: 使用将项目转换为可供生产环境使用的静态文件，输出到dist目录。上传文件:将本地打包生成的 dist 目录下的文件拷贝到服务器的目录。Nginx 配置: 配置 Nginx，设置静态文件路径以及反向代理，解决跨域问题。访问项目: 通过服务器 IP 或域名访问项目。
nginx助力打包部署
潜意识Java的博客
03-22 1607
亲爱的家人们，通过以上这些步骤，我们就完成了 Java 项目的打包部署以及使用 Nginx 进行优化和配置。这就像是我们精心打造了一艘坚固的船（Java 项目），然后通过 Nginx 这个优秀的舵手，让它在互联网的海洋中平稳地航行，为用户提供优质的服务。在未来的学习和实践中，我们还可以不断地深入研究和优化这些技术，让我们的项目更加高效、稳定和安全，为更多的人带来价值。
nginx打包rpm
冰激凌
08-05 1809
安装rpmbuild，生成目录，编写spec文件 附上自己写的nginx.spec文件。 由于公司需要，nginx需要添加lua等依赖包，就自己通过编译过程打包了rpm。红色部分是根据编译的结果添加上去的
前端vue项目——打包部署（nginx中部署静态资源）
岁岁岁平安的博客
08-10 2185
前端人员开发前端，后端人员开发后端的java工程，最终要将开发完毕的前端工程和后端工程分开部署在对应的服务器上（前端流行的nginx）（3）如果发现没有启动成功，就要查找是否有其它的应用占用端口号80，如果是系统占用，就只能修改nginx让其启动时占用其它端口号。（可以把html目录里默认存在的2个html文件删除，然后将刚刚上面的打包的全部文件复制进去）4、在任务管理器查看是否有nginx进程，若有，就可以去浏览器访问nginx部署的前端工程。（1）这次我学习的nginx里面的部署前端的静态资源。
vue打包部署nginx 配置
01-24
vue开发完毕，打包之后上线，传到nginx服务器配置问题解决
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
总结来说，解决Vue打包部署到Nginx时CSS样式不生效的问题，需要关注Vue CLI的打包配置（尤其是`assetsPublicPath`），以及Nginx的MIME类型配置。正确设置这些参数，可以确保CSS和其他静态资源被正确地服务和解析，...
Mac Nginx 前端打包部署
u010609022的专栏
11-12 628
安装homebrew/bin/安装Nginxnginx相关命令nginx启动命令：nginxnginx -s reload #重新加载配置nginx -s reopen #重启nginx -s stop #停止nginx -s quit #退出nginx -V #查看版本，以及配置文件地址nginx -v #查看版本nginx -c filename #指定配置文件nginx -h #帮助启动之后，在浏览器输入或。
【前端 22】使用Nginx部署前端项目
delepaste的博客
08-03 1666
在前端开发中，将项目打包并部署到服务器上是一个常见的需求。下面，我将详细介绍如何使用Nginx部署一个前端项目，并展开讲解Nginx的目录结构以及如何处理端口占用问题。文件部署到Nginx之前，了解Nginx的目录结构是非常有帮助的。通过这些步骤，你可以轻松地将前端项目打包并部署到Nginx服务器上，同时处理可能遇到的端口占用问题。目录会包含所有构建后的文件，这些文件是浏览器可以直接访问的静态资源。等）将项目打包成静态文件，并输出到指定的目录，通常是。（或你设置的任何其他端口）来访问你的前端项目了。
前端打包配置+nginx配置实现部署及部署地址带特定前缀的几种方式
lingliu0824的博客
06-26 4194
答案是和上面一样，即还是loacalhost/tenant-mgt/vendor/vue.min.js 因为和index同级就是相当于tenant-mgt的后面一级。: 指定文件系统中某个目录作为请求的根目录，Nginx会在该目录下寻找请求的文件,最后请求的路径为root指定的URL + location上的URL。（注意是以/结尾的） 则跟tenant-mgt/同级，相当于是tenant-mat的下一级，因为tenant-mgt后面有一个/如果部署的前缀固定，可以设置publicPath为固定路径。
nginx 部署前端项目的详细步骤（vue项目build打包+nginx部署）_前端工程打包部署到nginx
2401_84435838的博客
05-08 4686
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。
nginx打包部署前端vue项目全过程【保姆级教程】
潜意识Java的博客
10-02 8676
支持自定义错误页面（如 404、500），提升用户体验。
前端项目打包，自动部署
wgod
07-19 1287
前端自动部署 CICD
打包前端文件部署到nginx教程
11-04
打包前端文件并将其部署到Nginx服务器通常涉及几个步骤： 1. **构建工具**：首先，你需要使用构建工具如Webpack、Rollup或Vite来打包你的JavaScript、CSS和HTML文件。这一步会将它们合并成一个或多个优化过的文件，便于性能优化。 ```bash # 使用npm或yarn安装webpack或其他构建工具 npm install webpack -D ``` 然后创建配置文件（如webpack.config.js），配置好入口文件、出口文件路径以及处理其他资源（图片、字体等）的方式。 2. **运行构建过程**： ```bash npx webpack ``` 或者如果你有脚本自动化这个过程，可以使用`start`或`build`命令。 3. **生成静态文件**：构建完成后，你会得到一个dist目录，这里包含了所有被打包后的文件。 4. **Nginx配置**： 编辑Nginx的配置文件（通常是/etc/nginx/nginx.conf或sites-available/your-site.conf）。添加一个新的server块，指向你的dist目录，配置默认的index.html文件，并设置正确的 MIME 类型。 ```nginx server { listen 80; server_name yourdomain.com; root /path/to/your/dist; index index.html index.htm; location / { try_files $uri $uri/ =404; } } ``` 5. **重启Nginx服务**： ```bash sudo service nginx restart ``` 6. **验证部署**： 浏览器访问`http://yourdomain.com`，看看是否能正常加载你的网站。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值