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. 当双方Visual studio windows SDK不一样的时候的解决办法

    一. 把以前的SDK全部变成你的SDK 二.去重新装一个SDK版本和以前SDK一样的(这种解决办法太麻烦)

  2. 安装postgresql11.5

    root身份安装 创建用户 编译安装成功后,接下来要做的就是创建一个普通用户,因为默认超级用户(root)不能启动postgresql,所以需要创建一个普通用户来启动数据库,执行以下命令创建用户: [ ...

  3. 主从复制系列A

    一.主从原理 Replication 线程   Mysql的 Replication 是一个异步的复制过程,从一个 Mysql instace(我们称之为 Master)复制到另一个 Mysql in ...

  4. JZOJ5822 【NOIP提高A组模拟2018.8.16】 量子纠缠

    这是一道很巧妙的题目. 今早,我调了好久,终于将它切掉了-- 题目 Description Input 第一行包含一个正整数 m,代表操作数. 接下来 m 行,每行可能有以下形式: 1 s 代表将数字 ...

  5. HZOI2019序列

    题目链接:https://www.cnblogs.com/Juve/articles/11186805.html(密码是我的一个oj用户名) 题解: 这题我考试打的暴力,只有5分. 一开始理解错题意了 ...

  6. Django项目:CRM(客户关系管理系统)--74--64PerfectCRM实现CRM课程排名详情

    #urls.py """PerfectCRM URL Configuration The `urlpatterns` list routes URLs to views. ...

  7. PAT甲级——A1012 The Best Rank

    To evaluate the performance of our first year CS majored students, we consider their grades of three ...

  8. Git同平台下多个账号配置

    在公司要使用公司和自己的两个账号都往GitHub上面提交,所以整理成笔记 具体配置项 StrictHostKeyChecking no UserKnownHostsFile /dev/null # 为 ...

  9. Python基础---三大推导式

    推导式comprehensions(又称解析式),是Python的一种独有特性.推导式是可以从一个数据结构构建另一个新的数据结构的结构体. 共有三种推导,在Python2和3中都有支持: 列表(lis ...

  10. Leetcode102. Binary Tree Level Order Traversal二叉树的层次遍历

    给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点). 例如: 给定二叉树: [3,9,20,null,null,15,7], 3 / \ 9 20 / \ 15 7 返回其 ...