首页 > 系统相关 >nginx 配置 vue History模式

nginx 配置 vue History模式

时间:2024-05-28 09:57:06浏览次数:26  
标签:files index vue uri try nginx html root History

解决

需要加一行 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,其中文件路径是和 aliasroot 两个指令合在一起构造而成
  • 多个文件以第一个找到的文件作为请求;
  • 而文件后面以"/"结尾,会检查目录是否存在;
  • 当文件都找不到时,就会去以最后一个uri进行内部跳转请求

标签:files,index,vue,uri,try,nginx,html,root,History
From: https://www.cnblogs.com/niuben/p/18217185

相关文章

  • vue动态添加输入框简单案例
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>&l......
  • 彻底搞清楚vue3的defineExpose宏函数是如何暴露方法给父组件使用
    前言众所周知,当子组件使用setup后,父组件就不能像vue2那样直接就可以访问子组件内的属性和方法。这个时候就需要在子组件内使用defineExpose宏函数来指定想要暴露出去的属性和方法。这篇文章来讲讲defineExpose宏函数是如何暴露出去这些属性和方法给父组件使用。注:本文中使用的vue......
  • Vue框架-路由
    VueRouter笔记1.路由管理安装方式一:采用单页面CDN引入方式使用.方式二:基于vite构建的前端项目工程,安装依赖:在项目根目录下,安装:npminstallvue-router@4-s检查项目根目录下package.json中的dependencies是否多出:"vue-router"依赖.路由简单使用在sr......
  • Vue+OpenLayers7入门到实战:OpenLayers实现在地图上拖拽编辑修改绘制图形
    返回《Vue+OpenLayers7》专栏目录:Vue+OpenLayers7入门到实战前言本章介绍如何使用OpenLayers7在地图上拖拽编辑修改绘制图形。在前面一章中,我们已经学会了如何绘制基础的三种图形线段、圆形和多边形:《Vue+OpenLayers7入门到实战:OpenLayers图形绘制功能,OpenLayers实现在地......
  • vue项目创建(git-bash版本)
    前言        1、安装git-bash        2、安装node.js        3、npm包管理工具安装        4、安装webpack工具        5、安装vue-cli        6、创建项目        7、问题报错解决方案前言      ......
  • Nginx R31 doc-13-Limiting Access to Proxied HTTP Resources 访问限流
    前言大家好,我是老马。很高兴遇到你。我们为java开发者实现了java版本的nginxhttps://github.com/houbb/nginx4j如果你想知道servlet如何处理的,可以参考我的另一个项目:手写从零实现简易版tomcatminicat手写nginx系列如果你对netty不是很熟悉,可以读一下从......
  • Vue3实战笔记(46)—Vue 3高效开发定制化Dashboard的权威手册
    文章目录前言Dashboard开发总结前言后台管理系统中的Dashboard是一种图形化的信息显示工具,通常用于提供一个特定领域或系统的概况。它可以帮助用户监控和分析数据,快速获取重要信息。可以帮助用户监控业务状况、分析数据、获取关键信息和管理资源。通过合理的设计和......
  • Vue3实战笔记(47)— 一探emit奥秘——组件间通信的艺术与实践
    文章目录前言一、Vue2中的emti二、Vue3的emit总结前言Vue封装了自定义组件之后,如果子组件想要向父组件传递数据该怎么办?Vue.js中的emit方法就是主要用于组件间的通信,特别是父组件与子组件之间的通信机制。它是Vue组件内部触发自定义事件并向父级组件传递数......
  • 基于SpringBoot+Vue+uniapp的IT技术交流和分享平台的详细设计和实现(源码+lw+部署文档
    文章目录前言具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • vue3计算属性
    基础示例模板中的表达式虽然方便,但也只能用来做简单的操作。如果在模板中写太多逻辑,会让模板变得臃肿,难以维护。比如说,我们有这样一个包含嵌套数组的对象:我们想根据author是否已有一些书籍来展示不同的信息:这里的模板看起来有些复杂。我们必须认真看好一会儿才能明白......