如何将vue、react等前端项目发布到nginx

最新推荐文章于 2023-06-06 17:41:41 发布
最新推荐文章于 2023-06-06 17:41:41 发布
阅读量252 收藏
点赞数
分类专栏： 琐碎的知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41144077/article/details/112971734
版权

javascript vue.js reactjs

发布前端项目

下载nginx

nginx官网下载地址.找到自己电脑对应的安装包
在这里插入图片描述

将下载好的nginx上传到服务器，上传的话有很多的连接服务器的工具，随便找一个即可，用命令行或者windows拖拽的都可行。
注：最好将下载好的nginx先丢到服务器，然后再服务器里面找到nginx目录下的conf文件夹下的nginx.conf文件，按照如图所示进行配置， "location /"里面所指向的就是前端代码打完包后扔在服务器的地址。

主要是为了我某个不会nginx的前端朋友，写的不好大家多多见谅！
比孤狼还孤独的人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Vue前端部署到nginx
qi_teng的博客
06-29 689
1、服务器地址： 部署linux服务器ip 2、部署环境 版本：Nginx 1.13.7 /usr/local/nginx LINUX安装nginx详细步骤 1.安装依赖包 //一键安装上面四个依赖 yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 2.下载并解压安装包 //创建一个文件夹 cd /usr/local mkdir nginx cd nginx //下载tar包 http://nginx.org/down
vue前端自动化部署到服务器nginx
li199777的博客
09-01 758
vue前端自动化部署到服务器nginx
前端react 发布到nginx
tongjun_zhou的博客
05-26 546
1、拷贝前端文件，去除node_modules。并打包root.zip 2、上传liunx 解压，定位到解压文件根目录。如root/ 3、安装，cnpm -install .完成。 4、配置nginx.conf . location / { root html;//可以是绝对路径 index index.ht...
react项目创建及发布
qq_41815731的博客
08-12 283
react：npm install -g create-react-app create-react-app my-app cd my-app npm start cd my-app code 路由配置：npm install --save react-router react-router-dom npm install axios --save npm install antd --save ngnix react发布：Visual Studio Code的终端执行 npm run build VS
vue/react前端部署到nginx服务器
AmbroseLe
06-08 285
user nginx; worker_processes auto; error_log /var/log/nginx/error.log notice; pid /var/run/nginx.pid; events { worker_connections 1024; } http { include /etc/nginx/mime.types; default_type application/octet-stream; .
vue、react等单页面项目应该这样子部署到服务器
11-26
为了解决这些问题，我们需要将SPA部署到像Nginx、Apache或Tomcat这样的Web代理服务器，并正确配置它们以处理前端路由。 首先，理解SPA的部署基础。由于SPA的路由主要由前端处理，所有非根URL请求都应该重定向到`...
Nginx配置React项目Url后直接输入路由路径时报404问题的解决
09-30
总结一下，解决React项目在Nginx上直接输入路由路径导致404错误的方法是： 1. 更新Nginx配置中的`location`块，添加`try_files`指令。 2. `try_files`指令指明当请求的资源不存在时，返回`index.html`。 3. 保存配置...
项目打包运行dist以及nginx配置
最新发布
04-11
对于前端项目，如React、Vue或Angular等现代JavaScript框架，"dist"目录是常见的打包输出目标。这个目录包含了优化过的静态资源，例如HTML、CSS和JavaScript文件，它们是为生产环境准备的，可以直接被浏览器解析和...
cnode：CNODE社区演示：React，Vue
02-03
npm install本地运行：npm run start本地编译：npm run build部署到服务器：npm run delpoyVUE-CNODE项目介绍此项目基于Vue + Webpack + Gulp-ssh，主要使用webpack构建项目，gulp-ssh用于自动发布文件包到服务器。
如何部署前端react项目到服务器,Vue、React前端项目打包部署
weixin_36162883的博客
08-13 690
前端单页面应用部署前端打包上线部署方案之 hash路由模式对于hash路由模式打包的单页面应用，直接发布到服务器，使用nginx指向到对应文件目录即可，通用配置一般如下：location / {root /path/to/dist; // 服务器dist目录index index.html index.htm;}前端打包部署方案之history模式路由对于history模式路由模式的单页面应用，因...
记一次react公共组件打包发布流程
qq_32445707的博客
06-06 2598
最近有个需求，需要我做一个公共组件并且发布在npm上，由于之前并没有这方面经验所以在过程中耗费了比较多的时间（大部分时间在疯狂百度），所以在完成需求后写一篇博文记录一下。
将Vue项目部署在Nginx,解决前端路由、反向代理和静态资源问题
fwdwqdwq的博客
07-31 5126
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。(此项配置是为了前端路由的跳转，当所有的后端路由都找不到页面时，从新发送给前端index页面，让index页面查找前端路由)...
Nginx部署VUE前端页面（图文解说详细版）
编码人生
02-14 6783
如果你还没有安装Nginx，请参考： Linux安装Nginx 第一步，打包前端文件 npm run build 第二步，上传打包好的文件到Nginx的安装目录下的html 这里是使用的nginx的默认配置，如果需要自定义存放位置的话，可以去conf文件下的Nginx.conf去配置 第三步，自定义配置 第四步，启动Nginx 或者重启Nginx： ./nginx -s reload 第五步，访问你服务器的地址 ......
vue项目nginx服务器部署详细流程....
wanghe1111_的博客
02-08 8300
将自己做的vue项目部署到服务器上，这里我采用的工具是Nginx，Nginx是一款轻量级的web服务器、反向代理服务器，由于它的内存占用小，启动快，高并发能力强，在互联网项目中广泛应用，本网站是部署到Nginx服务器上，当然也可以选用其他web服务器，这里我选择较为主流的Nginx。 可以把Nginx想象为一个中间商（中间件），我们把网站放到中间商上去，然后中间商把服务器运行起来，就可以把我们的网站用外网可以访问。
Nginx部署Vue前端项目
he先森的博客
12-01 3977
系统环境：Mac Pro—10.15.7版本Nginx版本：1.19.6。
前端react项目如何部署到nginx
weixin_46395519的博客
02-21 5189
把前端代码部署到服务器，我一直以为是后端程序员的工作，直到跟我搭档的后端说他没有做过前端部署时，。。。内心奔腾啊， 另一面领导在群里说，我们暂时不用那么复杂，只要编译打包到nginx里就可以了。？？nginx是什么？ 万般无奈之下，想着自己慢慢研究吧。 相信大多数的前端小伙伴都是自己发布前端代码到测试环境的，想来发布版本有很多种方式，其一，我之前发版有用vscode编译完文件，通过ftp直连服务器，直接把www文件夹里内容替换即可， 其二，刚来本公司，后端同事设置好Jenkins，不管测试环境还是开发环境，
nginx 上部署 react 项目
热门推荐
路在脚下
05-31 1万+
打包npm run build 生成dist文件夹 2 将dist中的文件拷贝到nginx服务器的html文件夹中 3 修改 nginx.conf配置文件，配置端口号为9000 4 用管理员权限打开cmd,，启动ginx :start nginx ubuntu下部署情况 1、打包好你的react本地项目，dist中具有打包好的文件 2、将dist里的文件夹拷贝/home/root/下创建的react-demo文件中 3、进入/usr/local/nginx/...
解决vuejs或react应用在nginx非根目录下部署时访问404的问题
weixin_33868027的博客
12-24 8519
以往部署vuejs应用都是直接在nginx的location为/下直接部署，这次遇到要将vue应用部署在/vuejs-admin的非根下，使用以往部署方案直接访问就会404，这时修改步骤如下：1、修改项目router配置，如下：这里一是要修改router模式为history，另一个就是修改base地址为要访问的/vuejs-admin的地址，注意前后都有斜线2、修改build...
前端项目快速部署到 Nginx 服务器 及 常见问题
zic_liu的博客
07-12 1665
知识点 什么是 Nginx? Nginx 是一个高性能的http服务器及反向代理服务器 Nginx 的特点？ 热部署；可以高并发连接；cpu、内存等资源消耗却非常低；运行非常稳定；处理响应请求很快等 应用场景？ http服务器。Nginx是一个http服务可以独立提供http服务。可以做网页静态服务器。（本文重点） 虚拟主机。可以实现在一台服务器虚拟出多个网站。例如个人网站使用的虚拟主机。 反向代理，负载均衡。当网站的访问量达到一定程度后，单台服务器不能满足用户的请求时，需要用多台服务器集群可以使用ng
vue router react router使用History模式的nginx配置
05-24
如果你正在使用 Vue Router 或 React Router，并且选择使用“history”模式，那么你需要在 Nginx 中进行一些配置才能使它正常工作。这是因为在使用“history”模式时，路由器会将 URL 的路径部分发送到服务器，而...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值