问题背景:

  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 /index.html;
}

Vue路由history模式踩坑记录:nginx配置解决404问题的更多相关文章

  1. K8s nginx-ingress 如何配置二级目录转发远程静态服务器基于Vue路由history模式打包的应用程序

    背景 首先这标题有点绕,我先解释下: 首先我们有静态服务器,上面某个目录有Vue路由history模式打包的应用程序(也就是build后的产物): 但是静态服务器一般不做对外域名用的,我们需要在k8s ...

  2. VUE路由history模式坑记--NGINX

    因微信分享和自动登录需要,对于URL中存在'#'的地址,处理起来比较坑(需要手动写一些代码来处理).还有可能会有一些隐藏的问题没被发现. 如果VUE能像其他(JSP/PHP)系统的路径一样,就不存在这 ...

  3. vue路由history模式,nginx配置

    nginx配置内容 # For more information on configuration, see: # * Official English Documentation: http://n ...

  4. vue路由history模式刷新页面出现404问题

    vue hash模式下,URL中存在'#',用'history'模式就能解决这个问题.但是history模式会出现刷新页面后,页面出现404.解决的办法是用nginx配置一下.在nginx的配置文件中 ...

  5. 新来的前端小姐姐问:Vue路由history模式刷新页面出现404问题

    摘要:vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 本文分享自华为云社区<学习Vue Rou ...

  6. vue路由history模式下打包node服务器配置

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

  7. vue路由history模式刷新404问题解决方案

    更改router 的base // biz是二级目录,路由文件改成 const router = new VueRouter({ mode: 'history', // base: process.e ...

  8. 解决vue路由history模式刷新后404的问题

    server { listen ;#默认端口是80,如果端口没被占用可以不用修改 server_name localhost; root E:/vue/my_project/dist;#vue项目的打 ...

  9. nginx----------前端写了一套带有vue路由的的功能。放到nginx配置的目录下以后,刷新会报404未找到。

    1. 这是根据实际情况来写的. location /h5/activity/wechat/ {            index  index.html index.htm index.php;    ...

随机推荐

  1. Eclipse 更改默认的编码 和 换行符

  2. iOS Sprite Kit教程之编写程序以及Xcode的介绍

    iOS Sprite Kit教程之编写程序以及Xcode的介绍 Xcode界面介绍 一个Xcode项目由很多的文件组成,例如代码文件.资源文件等.Xcode会帮助开发者对这些文件进行管理.所以,Xco ...

  3. python 发送邮件(收到的邮件要有发送方才能回复)

    Python使用SMTP(简单邮件传输协议)发送邮件 普通文本邮件 普通文本邮件发送的实现,关键是要将MIMEText中_subtype设置为plain ## -*- coding: UTF-8 -* ...

  4. Codedforces 1076G Array Game 线段树

    题意 现在cf上看题意真nm麻烦,有道网页翻译和谷歌翻译鬼畜的一匹 两个人在玩一个游戏. 有一个有\(n\)个数序列\(B\),一开始有一个棋子在\(B\)的第一个位置. 双方轮流操作,第一次操作前将 ...

  5. BZOJ 1029: [JSOI2007]建筑抢修 优先队列

    1029: [JSOI2007]建筑抢修 Time Limit: 4 Sec  Memory Limit: 162 MB 题目连接 http://www.lydsy.com/JudgeOnline/p ...

  6. Linux下Qt安装

    1.下载qt-everywhere-opensource-src4.7.2.tar.gz(http://download.qt.io/archive/qt/4.7),并解压在/opt目录下,文件名为q ...

  7. Vue基础知识简介

    基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...

  8. VC获取屏幕分辨率及大小相关(转)

    vc得到屏幕的当前分辨率方法: 1.Windows API调用 int width = GetSystemMetrics ( SM_CXSCREEN );  int height= GetSystem ...

  9. java linux 项目常常无故被关闭 进程无故消息

    布了几个项目.竟然天天会自己主动的挂掉.急了.花时间攻克了一下.总结方案例如以下: 1.磁盘满了.这大家都懂,清一下 2.tomcat在关闭的或是重新启动的时候,经常后台进程没有被关闭.须要用ps a ...

  10. Win7 开启显示快速启动工具栏,发送到快速启动右键菜单

    开启Win7快速启动栏 许多网友一定记得在 Windows 7 之前的 Windows 系统都有个快速启动(quick launch)区域. 比如 IE 浏览器.Windows Media Playe ...