解决

需要加一行 try_files $uri $uri/ /index.html;,其中 /index.html 是你自己的目录中的入口文件

server {
listen [::]:80 default_server; #root /var/www/html; # Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html; server_name _; location / {
# First attempt to serve request as file, then
root /root/test/dist;
# as directory, then fall back to displaying a 404.
#try_files $uri $uri/ =404;
try_files $uri $uri/ /index.html;
}
……
}
try_files file... uri

这个语法的意思是:

  • try_files 后面可以定义多个文件路径和最后一个作为内部跳转的 uri,其中文件路径是和 alias 和 root 两个指令合在一起构造而成;
  • 多个文件以第一个找到的文件作为请求;
  • 而文件后面以"/"结尾,会检查目录是否存在;
  • 当文件都找不到时,就会去以最后一个uri进行内部跳转请求。

nginx 配置 vue History模式的更多相关文章

  1. Tomcat 配置Vue history模式

    Tomcat 配置Vue  history模式 近日 , 在使用 Tomcat 部署Vue项目时 , 刷新项目出现404的异常 . 原因是 Vue使用了history模式 , 而tomcat没有相关配 ...

  2. vue路由的两种模式配置以及history模式下面后端如何配置

    vue路由的两种模式配置以及history模式下面后端如何配置 1.hash ——即地址栏URL中的#符号.hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变has ...

  3. vue history模式 ios微信分享坑

    vue history模式 ios微信分享坑 问题分析:因为苹果分享会是调取签名失败是因为:苹果在微信中浏览器机制和安卓不同,有IOS缓存问题,和IOS对单页面的优化问题,通俗点说安卓进行页面跳转分享 ...

  4. vue history 模式打包部署在域名的二级目录的配置指南

    最近在做项目,需要把项目部署在域名下的二级目录,并且是在用vue-router的history 模式. 我们都知道vue-router 的两种前端基本访问模式 hash 和history .hash ...

  5. vue history模式下出现空白页情况

    问题描述:   vue搭建的项目,路由一直用的hash模式,所以url中都会带有一个“#”号.现在想要去掉“#”,于是使用history模式 { mode: 'history' },代码如下: imp ...

  6. vue history模式 ios微信分享 踩过的坑

    背景:教育项目,整体依赖于微信环境,涉及到微信分享.微信二次分享 问题:vue使用history模式在iso微信下分享设置出错(签名认证错误.分享设置失败) 问题发现路径 1.按照微信公众号官方文档设 ...

  7. vue history模式 apache配置

    我的服务器apache 版本是2.4.6 看文档上面说加那些代码,但是加上去重启服务器就不能重启,显示代码错误,然后百度查开启mod_rewrite这个重写URL 弄了半天也不会,百度上面的不知道是不 ...

  8. nginx配置vue项目部署访问无问题,刷新出现404问题

    现象: 在浏览器中直接访问www.test.com/api1/login会404.但如果你先访问www.test.com后再点“登录" 跳转到www.test.com/api1/login是 ...

  9. vue history模式

    注意: 1.前端:config.js路径问题 2.后台:配置nginx

  10. Vue history模式支持ie9

    vue 路由里面的history能让浏览器显示平常一样的链接,可以去掉#这种,但是在ie9下面会强制变成hash,因为history不支持ie9自动降级,可能就会影响美感,解决:可以在路由里面添加fa ...

随机推荐

  1. Qt编写地图综合应用28-闪烁点图

    一.前言 Qt除了内置了各种UI组件以外,还直接集成了浏览器控件,注意哦这可是跨平台的浏览器控件哦,在5.6版本以前集成的是webkit,以后集成的是webengine,使得程序的灵活性拓展性大大增强 ...

  2. StarRocks元数据无法合并

    一.先说结论 如果您的StarRocks版本在3.1.4及以下,并且使用了metadata_journal_skip_bad_journal_ids来跳过某个异常的journal,结果之后就出现了FE ...

  3. 抖音技术分享:飞鸽IM桌面端基于Rust语言进行重构的技术选型和实践总结

    本文由ELab团队公众号授权发布,原题<Rust语言在IM客户端的实践>,来自抖音电商前端团队的分享,本文有修订和改动. 1.引言 本文将介绍飞鸽IM前端团队如何结合Rust对飞鸽客户端接 ...

  4. 在已有的项目中使用vuiew ui库

    官方提供了三种方式,但是我觉得在已有的项目中使用是比较常见的 我在刚开始使用的时候不知道如何使用,我希望这个对大家有点帮助,特此来记录下! 我用的是创建了一个uview插件的项目,然后把里面uview ...

  5. 我的新书《C#上位机开发实战指南》出版了

    -Begin- 大家好!我是付工. 2022年的时候,我萌生了编写一本上位机书籍的想法,希望能给更多的上位机学习者提供一些帮助,经历了2年多的时间,今年的8月份,这本书终于出版了. 初衷 十年前,我也 ...

  6. linux网桥(Linux Bridge)的一些个人记录

    目录 1. Linux Bridge简述 2. 网桥创建 创建 配置持久化 在Debian/Ubuntu系统上: 在CentOS/RHEL系统上: 启用和验证 3. 关于linux网桥不转发ip帧的问 ...

  7. WPF 获取拖拽网页图片链接

    在浏览器里拖拽一个元素,我只获取图片链接 private void Grid_PreviewDragOver(object sender, DragEventArgs e) { e.Effects = ...

  8. WPF webbowser 交互

    // <Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/ ...

  9. weixueyuan-Nginx编译及部署1

    https://www.weixueyuan.net/nginx/ Nginx是什么 Nginx(发音同"engine x")是一个高性能的反向代理和 Web 服务器软件,最初是由 ...

  10. w3cschool-Python3 爬虫抓取、深度/机器学习类

    https://www.w3cschool.cn/python3/python3-enbl2pw9.html (1) requests安装 在cmd中,使用如下指令安装requests: pip in ...