关于nginx部署前端重定向问题

最新推荐文章于 2023-08-29 17:08:07 发布
最新推荐文章于 2023-08-29 17:08:07 发布
阅读量1.4k 收藏 1
点赞数 1
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43507499/article/details/106631176
版权

解决history模式，部署在nginx的前端项目f5刷新重定向的问题。
前端vue-router默认的是hash模式，浏览器显示的url会有一个#看着很丑，刷新出现404，而history则没有这个#符号，但是刷新则会重定向到首页。
这里只提供nginx的解决方案
首先，找到nginx的配置文件，在nginx.conf文件中找到location / 这个字符的位置，将大括号里面的内容修改为
try-files $uri $uri/ /index.html
添加完毕之后保存重启nginx service nginx restart
这样再刷新时候就不会出现跳转到首页的情况了！

能不能好好学习？
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用nginx部署前端项目（超详细教程）.pdf
04-29
使用nginx部署前端项目是一篇非常详细的教程，旨在帮助初学者使用Nginx来部署前端项目。本文首先介绍了Nginx的基本概念和作用，解释了为什么Nginx是一个强大的Web服务器和反向代理。然后，文章详细讲解了如何在Linux系统上安装Nginx，并介绍了Nginx的一些基本配置和使用方式。接下来，文章详细讲解了如何使用Nginx来部署前端项目，包括如何设置静态文件目录和如何配置反向代理和HTTPS。文章还包含了大量的代码示例和截图，以帮助读者更好地理解和操作Nginx。总的来说，这篇教程对于想要学习Nginx并使用它来部署前端项目的初学者来说是一篇非常实用和全面的指南。 此外，所使用的前端资源自已上传到了个人资源库，本人所有博客资源秉持免费的态度，提供大家，我们一起学习进步！ 在这个繁忙的世界里，我们常常会遇到很多人和事。有些人和事只是匆匆而过，而有些则会与我们产生深刻的联系和感悟。在这方面，我真的感谢遇见了你。你的聆听、鼓励和支持一直伴随着我走过很多难关和艰辛，这让我感到非常幸运和感激。 感谢相遇，愿我们向阳而生，温暖，善良！
手把手教你学会配置 nginx 的重定向
tiechui1994的博客
09-04 1万+
nginx的重定向功能的实现 首先说明两个概念: 地址重写和地址转发. 地址重写是为了实现地址的标准化. 举个例子, 在地址栏当中输入 www.baidu.com 和 www.baidu.cn 最后都会被重写到了 www.baidu.com 地址转发是指在网络数据传输过程中数据分组到达路由器或桥接器后, 该设备通过检查分组地址并将数据转发到最近的局域网的过程. 地址重写和地址转发的区别: 地址重写会改变浏览器的地址, 使之变成浏览器最新的地址. 而地址转发是不会改变浏览器的地址的. 地址重写产生两次请求,
【Nginx基础知识】详解nginx配置url重定向-反向代理
热门推荐
后端研发工程师Marion的博客
07-23 15万+
原文链接：https://www.jb51.net/article/99996.htm 本文系统：Centos6.5_x64 三台主机：nginx主机，hostname: master.lansgg.com  IP: 192.168.10.128              apache主机，hostname: client1.lansgg.com IP:  192.168.10.129 一、...
【前端】转发重定向
高精尖发展
08-30 3887
前言：       最近……   正文： 重定向Reirect：通过各种方法将各种网络请求重新定个方向转到其他位置 重定向常见方式： 1、301redirect：永久转移Permanently moved，网页更改地址后对搜索引擎友好的最好方法        2、302redirect：暂时性转移Temporarily moved       当一个网站或网页在24到48小时之内...
nginx设置重定向
qq_39187593的博客
08-29 3568
重定向指的是当用户访问某个URL时，服务器将该URL重定向到另外一个URL的过程。重定向可以帮助我们更好的管理网站内容，优化SEO效果，提升用户体验等。Nginx中提供了多种重定向方式，包括301重定向、302重定向、rewrite重定向等。
前端网站开发页面重定向的几种方法
web前端的发展
06-26 1万+
html重定向就是通过各种的方法将各种网络请求重新定个方向转到其它位置。 在网站建设中，时常会遇到需要网页重定向的情况：像网站调整，如改变网页目录结构，网页被移到一个新地址，再或者，网页扩展名改变，如因应用需要把。php改成。Html或。shtml，在这种情况下，如果不做重定向，则用户收藏夹或搜索引擎数据库中旧地址只能让访问客户还会得到一个404页面错误信息，访问流量白白丧失；再如某些注册了多个域...
nginx之重定向配置和反向代理代理配置
qq_48718409的博客
10-13 8585
linux服务器上对ngnix实现重定向（从服务器上访问前端静态资源）和反向代理
前端开发中的几种资源重定向方法
tonylua的博客
05-18 1859
在前端开发，尤其是开发SPA(单页应用)的时候，一个常见的需求是在调试和测试环境下搭建服务器实现资源的重定向。简单说就是静态资源直接返回，前端路由统归index.html，而ajax请求...
巨坑!nginx部署vue项目后刷新页面404，重定向不生效问题（已解决
云雨毅
08-18 1003
root 的目录地址是到能看到vue项目index的地方，如果是docker部署，请写docker中vue所在的目录。这几天部署vue项目后发现刷新页面会404，想到之前的经验添加重定向代码即可解决。1、server_name不能写localhost，请写具体IP！有两个注意点大多数人都没有提到。添加代码后还是404，找不到vue文件。解决方案：使用最基本的nginx配置。
解决nginx配置后访问都是跳转到nginx的欢迎页面
qq_36397267的博客
11-12 7597
需要配置nginx.conf在/usr/local/nginx/conf目录下，与sbin同级，配置文件位置错了，怎么改都没用
web服务器nginx+部署前端vue项目
最新发布
03-22
1. 什么是 nginx 和可以做什么事情 Nginx 是高性能的 HTTP 和反向代理的web服务器，处理高并发能力是十分强大的，能经受高负 载的考验,有报告表明能支持高达 50,000 个并发连接数。 其特点是占有内存少，并发能力强...
详解nginx配置url重定向-反向代理
01-20
一、nginx 地址重定向 二、nginx 反向代理 1、地址重定向：是指当使用者浏览某个网址时，将他导向到另一个网址的技术。常用在把一串很长的网址，转成较短的网址。因为当要传播某网站时，常常因为网址太长，不好...
详解Nginx中的重定向功能
09-30
主要介绍了详解Nginx中的重定向功能,Nginx是一款基于事务的无阻塞的高性能服务器,需要的朋友可以参考下
如何用Nginx解决前端跨域问题
09-30
在开发静态页面时，类似Vue的应用，我们常会调用一些接口，这些接口极可能是跨域，这篇文章主要介绍了如何用Nginx解决前端跨域问题，非常具有实用价值，需要的朋友可以参考下
nginx几种网页重定向（rewirte）的配置
weixin_43328213的博客
03-07 1万+
一、编译、安装Ngix [root@server1 nginx-1.14.2]# ./configure --prefix=/usr/local/nginx/ --with-http_realip_module --with-http_image_filter_module=dynamic --with-http_ssl_module [root@server1 nginx-1.14.2]# y...
Nginx的重定向
weixin_54959847的博客
08-08 5104
rewrite功能： 使用nginx提供的全局变量或自己设置的变量，结合正则表达式和标记位实现URL重写以及重定向。比如： 更换域名后需要保持旧的域名能跳转到新的域名上、某网页发生改变需要跳转到新的页面、网站防盗链等等需求。rewrite只能放在server{},location{},if{}中，并且默认只能对域名后边的除去传递的参数外的字符串起作用， 例如a=1&b=2 只对/abc/bbs/index.php重写。
前台Url重定向与具体应用
至尊宝
04-22 2万+
强烈推荐一个大神的人工智能的教程：http://www.captainbed.net/zhanghan 定义 重定向（Redirect）就是通过各种方法将各种网络请求重新定个方向转到其他位置。 前台js中的重定向 一、常见形式： self.location.href;//当前页面打开URL页面 window.location.href;//当前页面打开URL页面 t...
解决使用Nginx部署上线，单页面使用history模式，刷新出现404问题
weixin_54931655的博客
07-07 3179
总之，要解决使用Nginx部署上线，单页面使用history模式，刷新出现404问题，我们需要对Nginx进行配置，以便支持history模式。history模式是HTML5提供的一种前端路由模式，它使用HTML5的history API来实现前端路由，可以使得单页面应用在不刷新页面的情况下进行路由跳转。当用户刷新页面时，Nginx会将请求重定向到index.html文件，然后由前端路由来处理请求，使得用户可以正常访问页面。用户需要解决这个问题，使得单页面应用在使用history模式时，可以正常刷新页面。
nginx根据$remote_addr分发 (客户端IP)
moguibeijing的专栏
10-31 1万+
server {         listen       80;         server_name  www.abc.com;         location ~ ^(.*)\/\.svn\/{             deny all;          }         location /status {             stub_status on
将前端vue项目部署到nginx服务器
06-06
将前端 Vue 项目部署到 Nginx 服务器，可以按照以下步骤进行： 1. 构建项目：在本地开发环境中，进入 Vue 项目的根目录，执行以下命令进行构建： ``` npm run build ``` 这个命令会在项目的 `dist` 目录下生成一个静态文件夹，里面包含了构建好的前端静态资源。 2. 将构建好的静态资源上传到服务器：将构建好的 `dist` 目录打包成一个 zip 文件，并上传到服务器上。 3. 安装 Nginx：在服务器上安装 Nginx，具体安装方法可以参考 Nginx 的官方文档。 4. 配置 Nginx：在 Nginx 的配置文件中添加以下内容： ``` server { listen 80; server_name yourdomain.com; # 填写你的域名或 IP root /path/to/dist; # 填写你上传到服务器的静态资源目录 index index.html; location / { try_files $uri $uri/ /index.html; } } ``` 这个配置文件会将所有请求都重定向到 `index.html` 文件，从而实现前端路由的正常访问。 5. 启动 Nginx：在终端中执行以下命令启动 Nginx： ``` nginx ``` 6. 访问网站：在浏览器中输入你的域名或 IP 地址，即可访问前端网站。 以上就是将前端 Vue 项目部署到 Nginx 服务器的基本步骤。需要注意的是，如果使用 HTTPS 协议访问网站，则需要在 Nginx 的配置文件中添加 SSL 证书的相关配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值