vue3 项目部署，Nginx配置https,重定向，详细流程_vue3 前端项目ngnix配置

最新推荐文章于 2024-08-11 13:18:04 发布
最新推荐文章于 2024-08-11 13:18:04 发布
阅读量410 收藏 6
点赞数 4
文章标签： nginx https 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84435700/article/details/138236328
版权
本文介绍了Vue3项目部署的流程，重点讲解如何使用Nginx配置HTTPS以及进行重定向。首先阐述了Nginx作为高性能HTTP和反向代理服务器的角色，接着说明在宝塔面板中安装Nginx的步骤，然后通过解读配置文件关键参数，指导读者完成基本的Nginx配置，以实现前端项目的顺利上线。
摘要由CSDN通过智能技术生成
文章目录

前情提要

在这里插入图片描述
一个web项目完成后，我们需要打包部署上线，关于打包的实战在我的vite专栏里已经有过一些实践，今天我们来实践一些部署的过程，当然部署也可以由后端来完成；

应用场景

前端的部署，我们利用Nginx
❓什么是nginx

Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器 [13] ，同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点（俄文：Рамблер）开发的，公开版本1.19.6发布于2020年1

最低0.47元/天 解锁文章
2401_84435700
关注
Django + Vue 部署服务器nginx + uwsgi_nginx部署django和vue项目
m0_63174529的博客
04-21 1026
设置在平滑的重启（直到接收到的请求处理完才重启）一个工作子进程中，等待这个工作结束的最长秒数。指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？跟C,Java中的this有什么区别？跟C,Java中的this有什么区别？
nginx的安装、配置、使用、实战（反向代理，部署vue项目）
ShockChen7的博客
12-28 5703
接下来使用nginx简单配置一个反向代理的实例 实现效果：使用 nginx 反向代理，根据访问的路径跳转到不同端口的服务中 nginx 监听端口为 9001，在本地windows机中访问虚拟机的nginx， 我的虚拟机的ip为192.168.186.43，
vue前端项目部署之nginx配置.md
03-20
vue前端项目部署之nginx配置。
vue3 快速入门 (七) : Vue打包并部署到Nginx服务器上
朱豪凯的博客
08-11 1677
介绍vue3中怎么打包，并部署到Nginx服务器上
NGINX 备忘清单_开发速查表分享
banzhuan_it的博客
04-23 402
Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器 ，同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点（俄文：Рамблер）开发的，公开版本1.19.6发布于2020年12月15日。Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好。
小白Vue3+Nginx实现部署
热门推荐
Sumuxi9797926的博客
12-09 1万+
记录一下自己想搭建一个自己的个人网站的心路历程，其实我刚开始的落脚点是找一个别人的半成品或者成品，再慢慢的改，想把主要的精力放在后台上面，找了很多网站之后，例如,，不是项目很久没有维护了，就是好看的没有适合我的🙃（怪我，太菜了~傻狗哽咽🐮🐴），最后还是决定用vue3自己从0开始学，开始搭建。
vue3 项目部署，Nginx配置https,重定向，详细流程_vue3 前端项目ngnix配置(1)
2401_84618023的博客
05-08 1078
总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】httpgzip on;//gzip 压缩开启server{listen 80;//监听默认80端口//你的网址。
详解vue通过NGINX部署在子目录或者二级目录实践
10-18
完成Vue项目的内部配置后，我们需要配置NGINX服务器。创建一个新的`server`块来监听特定端口，例如`8001`，并将Vue应用的静态文件目录设置为`root`： ```nginx server { listen 8001; location / { try_files $...
Nginx部署vue项目
m0_67391683的博客
08-02 9115
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。将打包生成的dist文件夹内文件，放到nginx的安装包下，html文件夹中。这时可以看到生成dist文件夹，我们要放在服务器上的文件就在这，.
nginx服务器http重定向到https的正确写法
章郎虫的专栏
11-26 1285
查看原文：http://www.sijitao.net/1829.html 把http重定向到https使用了nginx的重定向命令。那么应该如何写重定向？之前老版本的nginx可能使用了以下类似的格式。 rewrite ^/(.*)$ http://domain.com/$1 permanent; 或者 rewrite ^ http://domain.com$requ...
nginx 强制跳转https
j6915819的专栏
08-31 1754
一、Nginx安装（略） 安装的时候需要注意加上 --with-http_ssl_module，因为http_ssl_module不属于Nginx的基本模块。 Nginx安装方法： 1 2 # ./configure --user=www --group=www --prefix=/usr/local/nginx --with-ht
nginx Vue前端配置
qiao
04-24 3939
1、打包文件 使用 npm run build 命令，将项目打出来（dist目录） 2、将 dist 目录上传至服务器 3、修改 nginx.conf 配置 nginx vue 配置 upst server { listen 9090 default_server; //修改端口 root /home/www/dist; //修改入口文件 location / { try_files $uri $uri/ /index.html; //解决单页面刷新404问题 } } ng
Nginx部署VUE3项目
Cc_Rain
03-23 776
root 参数：html/dist 不要在html前面加“/” ，此处配置不对 访问会显示404错误。本地开发环境中配置的 代理地址：http://ip:8088/xx/xx/xx/ 原值赋值后会导致报错。应配置为：http://ip:8088/xx/xx/xx，自后没有“/”扛。
nginx从http重定向到https
大白菜
04-24 6756
使用nginx把http重定向到https 背景： 1、没有加S的网页容易被嵌入广告 2、没有www的网页，微信支付调用不起来，够坑吧！ 解决方案： 1、将http重定向到https 2、将 domain.com 跳转到 www.domain.com 必备知识： 1、http 默认为 80 端口 2、https 默认为 443 端口 ...
nginx配置vue前端
qq_50909707的博客
09-04 753
nginx配置vue前端
Nginx http重定向https
Jason的学习笔记
11-22 686
SSL证书申请的腾讯的,配置好证书后，直接监听80端口转发443就ok了 转发语句：rewrite ^/(.*) https://$server_name:443$request_uri? permanent; # # HTTPS server configuration # server { listen 80; server_name domain.com; rew...
docker上用ngnix部署vue3项目，无法跳转路由
最新发布
09-20
在Docker上使用Nginx部署Vue 3项目时，遇到路由无法跳转的问题，可能是以下几个原因： 1. Nginx配置文件错误：确保你的Nginx配置（通常位于`nginx.conf`或`.docker/nginx.conf`）正确配置了反向代理到应用服务器，并指向了Vue项目的静态目录。例如，如果你的应用服务器运行在`localhost:8080`，配置可能类似这样： ``` location / { proxy_pass http://localhost:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } ``` 2. Vue-router的mode设置：确认Vue应用的`router.js`中是否设置了`mode`（history、hash等），如果是在`history`模式下，需要在Nginx中配置URL重写规则。 3. 跨域问题：如果你的应用和服务之间有跨域限制，需要在Nginx或后端服务器上添加允许特定源访问的 CORS 配置。 4. 环境变量未正确传递：在Docker容器启动时，可能需要将Vue应用的环境变量（如`VUE_APP_API_URL`）暴露给Nginx。 5. Docker网络问题：确认你的服务是否通过正确的网络连接在一起，比如桥接网络(`bridge`) 或者内部网络(`internal`)。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值