返回顶部
首页 > 资讯 > 服务器 >vue-router history模式服务器端配置过程记录
  • 226
分享到

vue-router history模式服务器端配置过程记录

2024-04-02 19:04:59 226人浏览 八月长安
摘要

history路由 history模式是指使用HTML5的historyapi实现客户端路由的模式,它的典型表现就是去除了hash模式中url路径中的#。在使用Vue-Router

history路由

history模式是指使用HTML5的historyapi实现客户端路由的模式,它的典型表现就是去除了hash模式中url路径中的#。在使用Vue-Router时开启history模式非常容易,只需要在实例化路由时传入mode:'history'配置项即可,但缺少服务端支持时,基于historyAPI的路由无法从url地址栏直接访问指定页面,这个很容易理解,因为url地址栏里输入后回车相当于发送了一次GET请求,那么不带#的路由路径就和普通的API接口是一样的,既然服务端并没有定义这样的接口,那直接访问时出现404页面就很正常了。

官方示例

官方提供了很多处理这种场景的方式,以node.js版本的处理方案为例:


const Http = require('http')
const fs = require('fs')
const httpPort = 80

http.createServer((req, res) => {
  fs.readFile('index.htm', 'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.htm" file.')
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})

不难看出,它的处理思路就是所有请求都强制重定向到首页,相当于服务端屏蔽了访问资源不存在的情况,而将路由的工作留给客户端自己去处理,这样启用了history模式的前端路由在直接定位到子页面时就不会报错了。

vue-router history模式配置

vue-router的history模式需要将路由配置中的mode设置成history,同时还需要在服务器端进行相应的配置。

与hash模式相比,在history模式下,页面的url中会少一些如#这样的符号:

hash:www.example.com/#/login

history:www.example.com/login

单页应用程序中,在history模式下浏览器会向服务器请求这个页面,但是服务器端并不存在这个页面于是就返回404。所以这个时候就需要给服务器端进行配置:除了静态资源以外都需要返回单页应用的index.html。

服务器配置——nodejs

nodejs服务器中需要引入connect-history-api-fallback这个模块来处理history模式,并在使用处理静态资源的中间件前使用这个模块:


const path = require('path')
// 导入处理history模式的模块
const history = require('connect-history-api-fallback')
const express = require('express')

const app = express()

// 注册处理history模式的中间件
app.use(history())
// 处理静态资源的中间件
app.use(express.static(path.join(__dirname, './WEB')))

app.listen(3000, () => {
    console.log('service started at port 3000')
})

服务器配置——nginx

先将打包后的文件放入html文件夹下,再打开conf文件夹下Nginx.conf文件,修改如下配置:


http {
    # ...other config
    server {
        # ...other config
        location / {
            root html;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
    }
}

总结

到此这篇关于vue-router history模式服务器端配置的文章就介绍到这了,更多相关vue-router history模式配置内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue-router history模式服务器端配置过程记录

本文链接: https://www.lsjlt.com/news/127818.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue-router history模式服务器端配置过程记录
    history路由 history模式是指使用HTML5的historyAPI实现客户端路由的模式,它的典型表现就是去除了hash模式中url路径中的#。在使用Vue-Router...
    99+
    2024-04-02
  • vue-router history模式服务器端如何配置
    这篇文章主要介绍了vue-router history模式服务器端如何配置的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue-router history模式服务器端如何配置文章都会有所收获,下面我们一起来看...
    99+
    2023-07-04
  • vue-router history模式服务器端配置的示例分析
    小编给大家分享一下vue-router history模式服务器端配置的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!history路由history模式是指使用HTML5的historyAPI实现客户端路由的模式...
    99+
    2023-06-15
  • vue-router如何实现history模式配置
    目录vue-router history模式配置一:概述二、实现history模式需要怎样配置mode:“history“的作用vue-router hist...
    99+
    2024-04-02
  • vue-router怎么实现history模式配置
    本文小编为大家详细介绍“vue-router怎么实现history模式配置”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue-router怎么实现history模式配置”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知...
    99+
    2023-07-02
  • vue3 history模式配置及nginx服务器配置
    vue的路由方式有hash模式和history模式,history模式路由看起来有好些,路由路径里没有#号,而hash模式默认是有#号的。 vue3开始默认新建的项目都是history模式,不过history模式打包后想要使用正常访问的话,...
    99+
    2023-09-08
    服务器 nginx 运维
  • vite vue3下配置history模式路由的步骤记录
    目录dev 模式pro模式nginx 配置后端配置补充几个文件总结dev 模式 利用vite 配置代理,可以解决前端浏览器限制跨域问题(当然后端要自己配置好) export defa...
    99+
    2023-01-28
    vite配置history模式路由 history模式路由
  • 服务器如何配置支持history模式
    88. 服务器如何配置支持history模式 服务器配置支持 history 模式是在使用前端路由时的常见需求,它使得在使用 history API 进行页面导航时,服务器能正确地返回对应的页面内容而...
    99+
    2023-10-05
    服务器 运维 history 前端 路由
  • vue-cli如何打包使用history模式的后端配置
    这篇文章主要介绍vue-cli如何打包使用history模式的后端配置,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!apache的配置这是windows下的在httpd-vhosts...
    99+
    2024-04-02
  • 云服务器怎么部署vue history模式
    本篇内容主要讲解“云服务器怎么部署vue history模式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“云服务器怎么部署vue history模式”吧!想要去掉地址中的 # 也不难,主要分两部...
    99+
    2023-07-04
  • vue-cli配置使用Vuex的全过程记录
    目录前言安装使用模块化管理vuex状态持久化总结前言     在vue开发用我们常常会用到一些全局的数据,比如用户信息、用户权限、一...
    99+
    2024-04-02
  • vue中history模式如何打包部署在域名的二级目录配置
    这篇文章将为大家详细讲解有关vue中history模式如何打包部署在域名的二级目录配置,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。最近在做项目,需要把项目部署在域名下的...
    99+
    2024-04-02
  • 云服务器有几种端口配置模式
    云服务器通常提供三种端口配置模式: 公共端口:通常用于提供网络互连,如FTP、Web等服务。这些端口用于与外界通信。 私有端口:这些端口通常用于提供专门的应用程序服务,如HTTP、Session等。这些端口可以用于不同应用程序之间的通信...
    99+
    2023-10-27
    几种 端口 模式
  • 前端Vue项目部署到服务器的全过程以及踩坑记录
    目录需求过程1、首先,肯定需要将vue的项目进行打包2、将dist文件上传到服务器3、使用Nginx配置 踩坑nginx服务器404错误的原因 404  Not ...
    99+
    2023-05-19
    vue项目布置到服务器 vue项目如何部署 前端项目怎么部署到服务器上
  • 云服务器有几种端口配置模式的
    动态端口配置:这种端口配置模式下,云服务器会动态地将端口开放给客户端,客户端通过动态域名配置工具(如WHERE)来访问云服务器的不同端口。 静态端口配置:这种端口配置模式下,云服务器只开放指定的端口,客户端需要通过静态域名配置工具...
    99+
    2023-10-27
    几种 端口 模式
  • 阿里云服务器配置怎么选择端口模式
    对于选择端口模式,需要考虑以下几个方面: 数据传输速度:选择正确的端口模式可以让应用程序能够在更快的速度下进行数据传输,这对于一些需要实时数据处理的应用来说非常重要。 安全性:选择端口模式也需要考虑应用程序的安全性,例如在防火墙规则内禁...
    99+
    2023-10-28
    阿里 端口 服务器配置
  • 【个人学习记录】pycharm配置ssh远程连接服务器
    文章目录 前言步骤一、配置ssh二、添加python解释器 总结 前言 pycharm配置ssh远程连接服务器跑模型 需要用到: PyCharm专业版XShell 步骤 一、配置ssh Host:远程...
    99+
    2023-08-19
    pycharm ssh
  • SpringBoot创建RSocket服务器的全过程记录
    前言 在微服务的多样化世界中,HTTP是代理到代理通信中无可争议的领导者。它成熟,无处不在。但在某些情况下,HTTP请求-响应可能很麻烦。如果您需要传统请求-响应之外的通信模式,如f...
    99+
    2024-04-02
  • java服务器的简单实现过程记录
    目录 一、HTTP二 socket类三 服务器应用程序的实现总结 一、HTTP  http请求  一般一个http请求包括以下三个部分:  1 请求方法,如get,post  2 请...
    99+
    2024-04-02
  • 云服务器端口映射模式设置
    1. 了解端口映射模式 在云服务器中,端口映射模式是一种网络配置方式,它允许将外部网络流量通过路由器或防火墙转发到云服务器的特定端口上。通过设置端口映射,可以实现云服务器与外部网络之间的通信。 2. 设置端口映射模式步骤 步骤 1:登录云...
    99+
    2023-10-27
    端口映射 模式 服务器
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作