在 ” etc/nginx/conf.d/  “路径下修改你的当前项目的conf文件

在location中添加,下文中加粗部分的代码,实现重写路径,以避免出现404。

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

}

其他解决方案请参考

https://blog.csdn.net/u011025083/article/details/80352301

或者官方vue的解决方案

https://router.vuejs.org/zh-cn/essentials/history-mode.html

vuex项目history模式下404问题的解决方案的更多相关文章

  1. Vue项目history模式下微信分享总结

    原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...

  2. vue项目history模式下微信分享相关问题

    import wx from '@/utils/wx' import { shareApi } from '@/api' // 微信验证 export function requireConfig() ...

  3. 在nginx上部署vue项目(history模式);

    在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...

  4. 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题

    一. 异常描述: 本来使用的是vue-router的hash模式,但是hash模式下url需要带“#”符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会 ...

  5. nginx反向代理部署vue项目(history模式)的方法

    前言: 根据标题我们要区分出两个信息 1. history 模式部署 ( vue的路由模式如果使用history,刷新会报404错误.) 2. Nginx 做反向代理 问题1思考: vue-route ...

  6. react history模式下的白屏问题

    近期,再用react的时候,由于不想用丑陋的hash,便将路由模式切换成history了,结果带来了一些问题,比如刷新白屏,还有图片加载不出来,这里我们说一下解决方案. 原因 首先,我们说一下造成这一 ...

  7. 在nginx上部署vue项目(history模式)--demo实列;

    在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...

  8. `vue-router`的`History`模式下的项目发布

    背景 脚手架版本号:vue cli 3.x 项目路由:vue-router的History模式 原理:url路由处理逻辑从后端转移到前端. 参考:https://developer.mozilla.o ...

  9. Vue项目History模式404问题解决

    本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题.(由于每个项目的情况都不尽相同,本方案已经完美解决本在所使用项目,具体情况可能还需要修改.) 1.项目背景分析 ...

随机推荐

  1. js的 break 和 continue 计算问题

    break和continue: 代码如下: var count=0;    outermost:    for(var i=0;i<10;i++){        for(var j=0;j&l ...

  2. JAVA运维总结篇

    写这篇文章主要目的是完成自己多年来运维JAVA应用的一个总结,相当于个人知识库,以后工作中遇到问题便于临时查阅并不断完善自己的知识体系.     上图,就知道Tomcat在JAVA容器界是多么重要. ...

  3. java使用jconsole查看java程序运行(jmx原理)

    在JVM启动参数上加上     java -Dcom.sun.management.jmxremote.port=8999     -Dcom.sun.management.jmxremote.aut ...

  4. jemter 90%line的解释

    假如: 有10个数: 1.2.3.4.5.6.7.8.9.10    按由大到小将其排列. 求它的第90%百分位,也就是第9个数刚好是9 ,那么他的90%Line 就是9 . 另一组数: 2.2.1. ...

  5. kubernetes 之kubelet客户端证书过期问题处理 KubeClientCertificateExpiration apiserver (monitoring/k8s warning) Kubernetes API certificate is expiring in less than 7 days.

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4gAAAKMCAYAAAAZj+XuAAABfGlDQ1BJQ0MgUHJvZmlsZQAAKJFjYG ...

  6. 使用PostMan测试WebService接口

    使用PostMan测试WebService接口 参考资料: 通过XML请求WebServer  https://blog.csdn.net/qq_33933408/article/details/53 ...

  7. Re-ranking Person Re-identification with k-reciprocal Encoding

    Re-ranking Person Re-identification with k-reciprocal Encoding Abstract In this paper, we propose a ...

  8. Apache Jmeter教程(一) - 入门

    一.下载Jmeter 登录官网Jmeter下载,得到压缩包jmeter-5.0.tgz,下载地址:http://jmeter.apache.org/download_jmeter.cgi. 二.安装 ...

  9. 《剑指offer》数组专题 (牛客10.22)

    目录 // Q01 二维部分有序数组查找 [善用性质] // Q06 旋转数组中的最小元素 [二分 || 暴力] Q13 调整数组顺序使奇数位于偶数前 / Q19 顺时针打印矩阵 [使用边界变量] / ...

  10. 搭建IIS CA DC Exchange TMG SQL (CA DC篇)

    搭建IIS CA DC Exchange TMG SQL (CA DC篇)   步骤 1: 在“下一步(N) > (按下按钮)”(位于“添加角色向导”中)上用户左键单击   步骤 2: 在“Ac ...