nginx 部署前端项目的详细步骤（vue项目build打包+nginx部署

最新推荐文章于 2024-08-10 22:01:37 发布
最新推荐文章于 2024-08-10 22:01:37 发布
阅读量1k 收藏 7
点赞数 3
分类专栏： 2024年程序员学习 文章标签： 前端 nginx vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84181326/article/details/137576185
版权
本文介绍了如何使用nginx部署Vue项目，包括项目打包、理解npm run serve/dev和npm run build命令，以及nginx的基本配置，如搭建多站点、设置文件过期时间和禁止访问目录。适合前端开发者参考。
摘要由CSDN通过智能技术生成

第三章 配置参考

第一章 前言

在我们前端开发中也经常需要把前端的静态资源放到服务器中看效果，那么我们就需要用到nginx来配置！！该文章主要以npm为例，当然还有yarn、pnpm，但是知识是相通的！！！

第二章 准备工作

2.1 项目打包理解

2.1.1 打包命令

不用说肯定是npm run build肯定是没错的

npm run build 或者
yarn run build

但是当经理对我们说，你打一个测试包发给我/你打一个生成包发给我，这个时候涉及到了多环境的打包怎么办呢，接下来就以小编的理解说说：打包的情况

2.1.2 理解npm run serve/dev 和 npm run build命令

npm ERR!Missing script: “dev“npm ERR!npm ERR! To see a list of scripts, run（npm run serve/dev/build）_❆VE❆的博客-CSDN

最低0.47元/天 解锁文章
2401_84181326
关注
专栏目录
vue项目如何部署到nginx服务器
bg22223的博客
05-03 2601
http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - remoteuser[remote_user [remoteu​ser[time_local] “$request” ’ '$status bodybytessent"body_bytes_sent "bodyb​ytess​ent"http_referer" ’ ‘“httpuseragent
前端打包配置+nginx配置实现部署及部署地址带特定前缀的几种方式
lingliu0824的博客
06-26 2138
答案是和上面一样，即还是loacalhost/tenant-mgt/vendor/vue.min.js 因为和index同级就是相当于tenant-mgt的后面一级。: 指定文件系统中某个目录作为请求的根目录，Nginx会在该目录下寻找请求的文件,最后请求的路径为root指定的URL + location上的URL。（注意是以/结尾的） 则跟tenant-mgt/同级，相当于是tenant-mat的下一级，因为tenant-mgt后面有一个/如果部署的前缀固定，可以设置publicPath为固定路径。
前端vue项目——打包部署（nginx中部署静态资源）
最新发布
m0_74363339的博客
08-10 1013
前端人员开发前端，后端人员开发后端的java工程，最终要将开发完毕的前端工程和后端工程分开部署在对应的服务器上（前端流行的nginx）（3）如果发现没有启动成功，就要查找是否有其它的应用占用端口号80，如果是系统占用，就只能修改nginx让其启动时占用其它端口号。（可以把html目录里默认存在的2个html文件删除，然后将刚刚上面的打包的全部文件复制进去）4、在任务管理器查看是否有nginx进程，若有，就可以去浏览器访问nginx部署的前端工程。（1）这次我学习的nginx里面的部署前端的静态资源。
vue项目部署到nginx
热门推荐
weixin_42565137的博客
05-26 6万+
最近产品做了一半，要求将前端的代码部署到服务器，以前没有部署过，这可咋办呀~~。现在部署好了，给大家总结以下，里面还是有很多坑的
Vue项目部署到Nginx服务器
极限突破者的博客
05-17 2592
本文将详细介绍如何将Vue前端项目部署到Nginx服务器。Nginx是一款开源的高性能HTTP服务器和反向代理服务器。
nginx 部署前端项目的详细步骤（vue项目build打包+nginx部署(1)
2401_84181326的博客
04-10 691
16、mysql的innodb如何定位锁问题，mysql如何减少主从复制延迟?16、mysql的innodb如何定位锁问题，mysql如何减少主从复制延迟?2、在工作中，运维人员经常需要跟运营人员打交道，请问运营人员是做什么工作的?6、Squid、Varinsh和Nginx有什么区别，工作中你怎么选择?5、LVS、Nginx、HAproxy有什么区别?9、讲述一下Tomcat8005、8009、8080三个端口的含义？7、Tomcat和Resin有什么区别，工作中你怎么选择?
nginx 部署前端项目的详细步骤（vue项目build打包+nginx部署）_前端工程打包部署到nginx
2401_84437170的博客
04-28 501
server {# 自定义监听端口# 浏览器访问域名serverserverroot dist;
nginx 部署前端项目的详细步骤（vue项目build打包+nginx部署）_前端工程打包部署到nginx(2)
2401_84437170的博客
04-28 515
函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；
vue打包部署nginx 配置
01-24
vue开发完毕，打包之后上线，传到nginx服务器配置问题解决
nginx部署vue项目
PhilsphyPrgram的博客
07-14 1万+
windows的nginx部署vue项目
部署Vue项目到Nginx：简明教程
七一
05-22 1860
1、什么是nginx nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点（俄文：Рамблер）开发的，公开版本1.19.6发布于2020年12月15日。 [12] 其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名。2022年01月25日，nginx 1.21.6发布。 [13] Nginx是一款轻量级的
Vue项目部署（Nginx）
weixin_42067873的博客
09-05 1万+
vue项目部署
vue部署到nginx
明耀的博客
08-27 383
1、安装nginx 2、打包vue项目 npm run build 生成 3、配置nginx location / { root edu/dist; #dist路径 index index.html index.htm; } 4、放入dist 5、成功访问 http://localhost/
vue项目nginx服务器部署详细流程....
wanghe1111_的博客
02-08 8323
将自己做的vue项目部署到服务器上，这里我采用的工具是Nginx，Nginx是一款轻量级的web服务器、反向代理服务器，由于它的内存占用小，启动快，高并发能力强，在互联网项目中广泛应用，本网站是部署到Nginx服务器上，当然也可以选用其他web服务器，这里我选择较为主流的Nginx。 可以把Nginx想象为一个中间商（中间件），我们把网站放到中间商上去，然后中间商把服务器运行起来，就可以把我们的网站用外网可以访问。
Windows安装Nginx及部署vue前端项目操作
赵小默的博客
08-31 653
windows系统部署nginx及vue项目
Vue前端部署：详解Nginx配置与步骤
总结起来，这篇文档详细地指导了Vue前端项目的开发者如何通过Nginx进行部署，包括了配置文件的调整、静态文件的放置和重定向策略的设置。这有助于提高网站性能，确保前端应用在生产环境中的稳定性和可用性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值