Vue路由history模式踩坑记录：nginx配置解决404问题

问题背景：

　　vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash模式的话，那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问，如果路由使用 history的话，那么访问的路径变成如下：http://localhost:8080/bank/page/count 这样的了；

　　不过history的这种模式需要后台配置支持。比如：当我们进行项目的主页的时候，一切正常，可以访问，但是当我们刷新页面或者直接访问路径的时候就会返回404，那是因为在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我直接在浏览器里输入这个地址的时候，就一定要对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404

　　怎么解决呢？我们现在可以把所有请求都转发到 http://localhost:8080/bank/page/index.html上就可以了。

解决方案：

　　对于VUE的router[mode: history]模式在开发的时候，一般都不出问题。是因为开发时用的服务器为node，Dev环境中自然已配置好了。

　　但对于放到nginx下运行的时候，自然还会有其他注意的地方。总结如下：

　　在nginx里配置了以下配置后，可能首页没有问题，但链接其他会出现（404）

　　　　location / {root   D:\Test\exprice\dist;index  index.html index.htm;try_files $uri $uri/ /index.html;add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';}location ^~/api/ {proxy_pass   http://39.105.109.245:8080/;}

　　为了解决404，需要通过以下两种方式：

　　1、官网推荐

location / {root   D:\Test\exprice\dist;index  index.html index.htm;try_files $uri $uri/ /index.html;

　　2、匹配errpr_page

location /{root   /data/nginx/html;index  index.html index.htm;error_page 404 /index.html;
}

Vue路由history模式踩坑记录：nginx配置解决404问题相关推荐

用Gitee Pages服务在线预览vue3前端项目:静态网站+多级路由+history模式(踩坑)
目录目标与前提 vue打包.预览遇到的坑以及原因坑①:静态网站打开一片空白坑②:子路由刷新或直接输入时,网页一片空白或404 坑③:首页加载时间过长坑④:线上预览地址出错时,不显示404页面 ...
vue路由history模式,nginx配置
nginx配置内容 # For more information on configuration, see: # * Official English Documentation: http://n ...
vue 打包路由报错_Vue下路由History模式打包后页面空白的解决方法
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往 ...
新来的前端小姐姐问：Vue路由history模式刷新页面出现404问题
摘要:vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 本文分享自华为云社区<学习Vue Rou ...
Vue 路由history模式nginx部署(二级目录)
公司常用服务器为apache,最近一个项目需部署到nginx目录,且是在子目录下,即访问链接:http://www.xxx.com/rector/bnu/ apache服务器配置很简单,只需要在ind ...
vue路由history模式刷新页面时页面丢失时常见的两种解决方法
方法一: 1 2 3 4 5 6 7 8 location /{ root /data/nginx/html; index index.html index.htm; i ...
vue 路由history模式打包部署 The requested URL * was not found on this server. 的解决方法
apache开启rewrite_module模块, 在项目根目录创建.htaccess文件,文件内容如下 <IfModule mod_rewrite.c> Options +Follo ...
nginx导致vue设置history模式下的请求丢失参数
nginx导致vue设置history模式下的请求丢失参数问题描述: 当访问下面的路径时参数会丢失: http://ip/vuecay/path1/path2?name=cay 演示效果: 可以看到 ...
Mirai qq机器人ubuntu配置踩坑记录
Mirai qq机器人ubuntu配置踩坑记录 intellij配置打包jar ubuntu无界面运行 Mirai GitHub 链接 mirai-github intellij配置我的是Ulti ...

Vue路由history模式踩坑记录：nginx配置解决404问题

Vue路由history模式踩坑记录：nginx配置解决404问题相关推荐

最新文章

热门文章