在 ” 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. Linux rpm 安装MySQL

    1 检查是否存在旧版本mysql (1) mysql 执行命令:rpm -qa|grep mysql,若存在旧mysql,删除查询到的旧mysql,执行: rpm -e --nodeps XXXX  ...

  2. 如何查看appPackage和启动appActivity

    安装apk,模拟器或真机中在前台运行该应用程序,获取appPackage,即应用包名 appPackage:  adb shell dumpsys activity | find "mFoc ...

  3. netframework webapi IogAttribute记录request参数和错误信息

    参考博客 https://www.cnblogs.com/hnsongbiao/p/7039666.html 书写LogFilterAttribute public class LogFilterAt ...

  4. exposed beyond app through ClipData.Item.getUri()

    Android7.0调用相机时出现新的错误: android.os.FileUriExposedException: file:///storage/emulated/0/photo.jpeg exp ...

  5. 安装windows下安装mysql

    参考文档:https://www.cnblogs.com/reyinever/p/8551977.html  https://www.jb51.net/article/151213.htm 首先下载m ...

  6. Mac下持续集成-与JMeter与Ant执行后自动发送邮件的整合+定时任务

    mac定时任务的开启: Last login: Tue Aug 13 22:49:54 on ttys004 (base) localhost:~ ligaijiang$ sudo launchctl ...

  7. 美国top200药品2

     python机器学习-乳腺癌细胞挖掘(博主亲自录制视频)https://study.163.com/course/introduction.htm?courseId=1005269003&u ...

  8. 利用sorket实现聊天功能-服务端实现

    工具包 package loaderman.im.util; public class Constants { public static final String SERVER_IP = " ...

  9. es6 是否包含字符串判断

    字符串查找类 接下来介绍一些可以通过 ES5 PolyFill的方法,但是现在 ES6 原生实现了 Method Param Return Description includes() 需要验证是否被 ...

  10. K/3 Cloud 单据关联查询

    销售出库单 下推 销售退货单,如何获知他们的关联关系?T_SAL_OUTSTOCKENTRY 是销售出库单分录T_SAL_RETURNSTOCKENTRY 是销售退货单分录T_SAL_RETURNST ...