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

方法一:


location /{
root /data/nginx/html;
index index.html index.htm;
if (!-e $request_filename) {
rewrite ^/(.*) /index.html last;
break;
}
}

方法二:
vue.js官方教程里提到的https://router.vuejs.org/zh/g...


server {
listen 8081;#默认端口是80,如果端口没被占用可以不用修改
server_name myapp.com;
root D:/vue/my_app/dist;#vue项目的打包后的dist
location / {
try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
index index.html index.htm;
}
#对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
#因此需要rewrite到index.html中,然后交给路由在处理请求资源
location @router {
rewrite ^.*$ /index.html last;
}
#.......其他部分省略
}

来源:https://segmentfault.com/a/1190000016653688

vue路由history模式刷新页面出现404问题的更多相关文章

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

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

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

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

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

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

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

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

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

    vue单页因微信分享和自动登录需要,对于URL中存在’#’的地址,处理起来比较坑.用history模式就不会存在这样的问题.但是换成history模式,就会有个新的问题,就是页面刷新后,页面就无法显示 ...

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

    问题背景: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使 ...

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

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

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

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

  9. vue下history模式刷新后404错误解决

    官方说明文档: https://router.vuejs.org/zh/g... 一. 实测 Linux 系统 Apache 配置: 更改站点配置文件即可,我这里在 Directory 标签后面添加了 ...

随机推荐

  1. yii2下使用支付宝

    最近入坑了yii2 感觉是个很强大的框架.使用yii做支付宝的移动支付的时候出了点问题,记录下来避免以后忘记了. 使用的是支付宝立即到账的功能,网上很多集成好的接口我就不重复了,找不到的话github ...

  2. 2019-8-31-C#-已知点和向量,求距离的点

    title author date CreateTime categories C# 已知点和向量,求距离的点 lindexi 2019-08-31 16:55:58 +0800 2018-05-08 ...

  3. 动态规划——DP算法(Dynamic Programing)

    一.斐波那契数列(递归VS动态规划) 1.斐波那契数列——递归实现(python语言)——自顶向下 递归调用是非常耗费内存的,程序虽然简洁可是算法复杂度为O(2^n),当n很大时,程序运行很慢,甚至内 ...

  4. C/C++常考基础面试题(更新)

    题目来自牛客网 解析部分来自牛客网 https://www.nowcoder.com/4685265 一 分析下面代码有什么问题? void test1() { char string[10]; ch ...

  5. urllib与urllib2的学习总结

    先啰嗦一句,我使用的版本是python2.7,没有使用3.X的原因是我觉得2.7的扩展比较多,且较之前的版本变化不大,使用顺手.3.X简直就是革命性的变化,用的蹩手.3.x的版本urllib与urll ...

  6. visual studio 2013 打开失败 ,报错:未能完成操作,不支持此接口

    因为从新安装了.net 4.0版本,再打开visual studio 2013时,提示报错:未能完成此操作,不支持接口 解决办法:从microsoft官网下载了最新4.5版本进行安装后.即可成功打开.

  7. WhaleCTF之web密码泄露

    WhaleCTF之密码泄露 前往题目 没有思路,习惯看一下源码,拉到最后,发现有惊喜 直接把index.php 换成password.txt,访问 这是要让我密码爆破吗?直接把密码保存成passwor ...

  8. 2019阿里云开年Hi购季满返活动火热报名中!

    摘要: 在每年开年的这个大幅度优惠促销月,怎样才能花最少的钱配置最特惠的云服务?请看本文! 2019阿里云云上采购季活动已经于2月25日正式开启,从已开放的活动页面来看,活动分为三个阶段: 2月25日 ...

  9. Linux报错:“/bin/bash^M: 坏的解释器

    原因是linux下的文件,在windows下面编辑过.在win下编辑的时候,换行结尾是\n\r , 而在linux下 是\n 解决方法,将文件里面的内容做替换即可 sed -i 's/\r$//' b ...

  10. Codeforces 467D

    题目链接 D. Fedor and Essay time limit per test 2 seconds memory limit per test 256 megabytes input stan ...