Nginx配置React项目Url后直接输入路由路径时报404问题的解决

前言

如今react应用普遍，最近在配置react项目中遇到了一个问题，通过查找相关的资料终于找到了解决的方法，所以想着总结一下分享出来给有需要的朋友们，下面话不多说了，来一起看看详细的介绍吧。

发现问题

大家都知道，当我们写完项目后，要对项目进行部署，我的配置很简单

location /demo {
 root E:/;
 index index.html index.htm;
}

这样配置的有一个问题，只能 http://localhost/demo/来访问。

如果想访问里面的其它界面如 http://localhost/demo/page1的话，就报404找不到页面。

可我在开发的时候，确实没有问题，可以进行访问的，于就想难道必须得用node来项目吗？不会吧，也许是我自己不会配置所致。

解决方法

终于找到办法了，在其它人的nginx.config里发现多加了一行东西。

location /demo {
 root E:/;
 #加上了这个，就可以在url后面直接加路由上配置path了。
 try_files $uri /demo/index.html;
 index index.html index.htm;
}

致于为什么，不清楚，但是功能实现了。

在此标记一下，以备后需之用。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • nginx配置React静态页面的方法教程

    nginx配置React静态页面的方法教程

    前言 本文主要给大家介绍了关于nginx配置React静态页面的相关内容,文中给大家详细介绍了关于nginx的安装以及一些基本操作,然后给大家分享了React 静态页面 nginx 配置简洁版的示例代码,下面话不多说了,来一起看看详细的介绍吧. 关于nginx的安装启动以及80端口被占用的解决方法,大家也可以参考这篇文章:http://www.jb51.net/article/110291.htm 第一步:安装 1.http://nginx.org/en/download.html 下载 2.t

  • Nginx配置React项目Url后直接输入路由路径时报404问题的解决

    前言 如今react应用普遍,最近在配置react项目中遇到了一个问题,通过查找相关的资料终于找到了解决的方法,所以想着总结一下分享出来给有需要的朋友们,下面话不多说了,来一起看看详细的介绍吧. 发现问题 大家都知道,当我们写完项目后,要对项目进行部署,我的配置很简单 location /demo { root E:/; index index.html index.htm; } 这样配置的有一个问题,只能 http://localhost/demo/来访问. 如果想访问里面的其它界面如 htt

  • nginx配置proxy_pass中url末尾带/与不带/的区别详解

    nginx配置proxy_pass时url末尾带"/"与不带"/"的区别如下: 注意:当location为正则表达式匹配模式时,proxy_pass中的url末尾是不允许有"/"的,因此正则表达式匹配模式不在讨论范围内.  proxy_pass配置中url末尾带/时,nginx转发时,会将原uri去除location匹配表达式后的内容拼接在proxy_pass中url之后. 测试地址:http://192.168.171.129/test/tes

  • 解决vue项目打包后提示图片文件路径错误的问题

    vue项目打包后在production模式下提示图片 '404(not found),在dev环境下好好的,打包了就提示这个错误.这是为什么呢,以前第一次使用vue-cli构建项目的的时候只有两个图片文件,当时部署后报错路径问题, 当时的想法就是简单粗暴,直接在build好的文件修改了文件路径,再后来项目中遇到了一大堆静态资源,修改路径显然是不行的,看了一下生成文件大概知道是文件目录改变了,所以引用的路径也要随之改变,网上最简单的方法是修改 'config/index.js'文件中的 build

  • 从零开始搭建一个react项目开发

    本文介绍了从零开始搭建一个react项目开发,分享给大家,具体如下: 1.npm init 生成 package.json 文件. 2.安装各种需要的依赖: npm install  --save react - 安装React. npm install  --save react-dom 安装React Dom,这个包是用来处理virtual DOM.这里提一下用React Native的话,这里就是安装react-native. npm install  --save-dev webpack

  • Vue3项目打包后部署到服务器 请求不到后台接口解决方法

    本地开发没问题能正常请求到接口,部署后页面也能展示出来就是接口的数据请求不到 network一看是这么个情况 对比了本地的页面 可以发现是remote address出了问题. 经过查询得知:Remote Address代表的是当前HTTP请求的远程地址,即HTTP请求的源地址. 我的猜想是proxy代理在本地环境下用的是localhost即127.0.0.1进行转发代理的,而部署到服务器后相当于换了个环境( ip地址和端口已经改变 ),此时proxy代理就出错了. 解决方法: 地址错误了,那就

  • Ubuntu下Nginx配置ThinkPHP的Pathinfo和URl Rewrite模式

    概述 在上一篇文章Nginx配置Thinkphp支持URL Rewrite中已经介绍了如何配置Nginx支持ThinkPHP的URL Rewrite,但是上文针对的是Centos平台,这次因为某些特殊的原因,服务器环境必须用ubuntu,本来以为和Cetons中一模一样,但是配置完了发现不能使用,所以就百度了一些文章. 配置方法 TP官方解决方案 复制代码 代码如下: location ~ .php         {                 #原有代码                

  • nginx配置域名后的二级目录访问不同项目的配置操作

    场景描述: 通过二级目录(虚拟目录,应用程序)的方式访问同一ip+端口的不同应用,例如location是用户使用页面,location/admin/是管理页面,location部署在192.168.1.100的80端口,location/admin部署在172.20.1.32的8080端口上. 解决方案: 使用nginx反向代理,配置如下: server { listen 80; server_name demo.domain.com; #通过访问service二级目录来访问后台 locatio

  • nginx proxy_pass反向代理配置中url后加不加/的区别介绍

    nginx proxy_pass反向代理配置中url后加不加/的区别介绍

    前言 nginx作为web服务器一个重要的功能就是反向代理.nginx反向代理的指令不需要新增额外的模块,默认自带proxy_pass指令,只需要修改配置文件就可以实现反向代理. 而在日常的web网站部署中,经常会用到nginx的proxy_pass反向代理,有一个配置需要弄清楚:配置proxy_pass时,当在后面的url加上了/,相当于是绝对根路径,则nginx不会把location中匹配的路径部分代理走;如果没有/,则会把匹配的路径部分也给代理走(这样配置可以参考这篇文章). 下面举个小实

  • nginx上部署react项目的实例方法

    测试项目:react-demo 克隆你的react-demo项目到服务器上(默认使用Github管理我们的项目) 如果需要,请安装项目环境,比如:node.js,yarn等 进入项目目录,执行npm run build,开始构建项目 构建成功之后,会生成一个dist文件夹(取决于你的项目配置),这个文件夹里的静态文件,就是我们的项目的访问文件了, 配置Nginx,Linux服务器是进入到:/etc/nginx/sites-enabled,然后以管理员身份,新建一个你的react项目的配置文件,比

随机推荐