在 ” 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. 黑马vue---61、为什么vue组件的data要是一个函数

    黑马vue---61.为什么vue组件的data要是一个函数 一.总结 一句话总结: 因为js中以函数为变量作用域,所以这样可以保证每个组件的数据不互相影响 二.why components data ...

  2. linux 下 tcpdump 命令详解

    用途 在网络上转储流量 语法 tcpdump [ -a ] [ -A ] [ -B buffer_size ] [ -d ] [ -D ] [ -e ] [ -f ] [ -l ] [ -K ] [  ...

  3. QMessageBox改变大小

    创建一个QMessageBox: QMessageBox msgBox(this);msgBox.setWindowTitle(tr("MailBox Location"));ms ...

  4. Linux使用iptables设置黑白名单

    使用ipset工具 1,下面我先说下iptables的基本配置规则,然后再说ipset以下使用C7 x86_64为实验环境CentOS7默认的防火墙不是iptables,而是firewalle.如果你 ...

  5. 二、navicat连接本地数据库以及远程数据库

    本地连接 1.打开navicat 2.连接 最后点击确定就连接成功了: 远程数据库 和上面一样.....

  6. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_11-freemarker静态化测试-基于模板字符串静态化

    再定义一个测试方法 把拿到的字符串变成模板 加载器设置好了以后, 加一个断点来测试 生成模板文件 上面这种方式很灵活. 最终代码 @Test public void testGenerateHtmlB ...

  7. 用Keras搭建神经网络 简单模版(四)—— RNN Classifier 循环神经网络(手写数字图片识别)

    # -*- coding: utf-8 -*- import numpy as np np.random.seed(1337) from keras.datasets import mnist fro ...

  8. 数学建模python matlab 编程(喷泉模拟)

    在无风情况下的喷泉模拟 我的python代码 import numpy as np import random import matplotlib matplotlib.rcParams['font. ...

  9. BP神经网络算法预测销量高低

    理论以前写过:https://www.cnblogs.com/fangxiaoqi/p/11306545.html,这里根据天气.是否周末.有无促销的情况,来预测销量情况. function [ ma ...

  10. 《精通并发与Netty》学习笔记(13 - 解决TCP粘包拆包(一)概念及实例演示)

    一.粘包/拆包概念 TCP是一个“流”协议,所谓流,就是没有界限的一长串二进制数据.TCP作为传输层协议并不不了解上层业务数据的具体含义,它会根据TCP缓冲区的实际情况进行数据包的划分,所以在业务上认 ...