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. Hibernate调用Oracle的存储过程

    众所周知,当过多的使用存储过程,触发器等 数据库方言相关的应用时,应用程序的移植性会变差,特别是在Hibernate中使用这些,简直是讽刺,但是当今中国又有哪家公司做项目会关心应用程序的移植性呢? 现 ...

  2. matlab 实现感知机线性二分类算法(Perceptron)

    感知机是简单的线性分类模型 ,是二分类模型.其间用到随机梯度下降方法进行权值更新.参考他人代码,用matlab实现总结下. 权值求解过程通过Perceptron.m函数完成 function W = ...

  3. C语言源代码——计算任何一天是星期几

    代码写的不严谨. 网上也有很多计算任何一天是星期几的C语言源代码,不过,有些代码含有一点点小错误.像闰年的分辨啊,或者是每个月的天数,再或者星期的计算公式,都是比较细微的环节,出一点错误都有可能导致结 ...

  4. MICROSOFT SQL SERVER 2012 序列号

    MICROSOFT SQL SERVER DEVELOPER 版(开发版) 序列号:YQWTX-G8T4R-QW4XX-BVH62-GP68Y MICROSOFT SQL SERVER ENTERPR ...

  5. 对于ssm过程中的乱码问题的处理

    首先是数据库乱码问题: 1.可以先检测一下是否是数据库的问题: 可以先输入查询语句SHOW VARIABLES LIKE 'character_set_%';,查看所有的编码是否是UTF-8. (一般 ...

  6. Luogu P1948 [USACO08JAN]电话线Telephone Lines(最短路+dp)

    P1948 [USACO08JAN]电话线Telephone Lines 题意 题目描述 Farmer John wants to set up a telephone line at his far ...

  7. 使用Python的requests库作接口测试——请求对象与响应对象

    任何时候调用requests.*()操作接口时,我们都在做两件事情: 1.构建一个Request对象,该对象被发送到服务器去请求或查询一些资源: 2.一旦requests得到一个从服务器返回的响应,就 ...

  8. 阿里云CDN上线 WAF,一站式提供分发+安全能力

    CDN是业界公认的加速网站访问效率.提升用户体验的内容分发加速产品.Gartner预测2019年超过50%的互联网流量将通过CDN内容分发网络进行加速. 然而,越来越多企业也意识到恶意网络攻击对非凡用 ...

  9. linux中tab键不能补全,却能切换窗口

    linux中所有程序-设置-窗口管理器-键盘-切换同一应用程序的窗口-清除

  10. UVA10905 Children's Game

    题意:给定n个正整数,把它们连接成一个最大的整数.比如,123,124,556,90有24种连接方法,最大的结果为9 056 124 123. 贪心.一开始就想用string水过.注意不能直接用str ...