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

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模式配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue-router中的hash和history两种模式的区别

    众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别. hash模式 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body.style.color = has

  • vue-router的HTML5 History 模式设置

    VUE是当下最火爆的前端框架之一,vue-router是vue项目中几乎都会用到的组件,然而体验一时爽,其实坑不少.本篇经验将详细介绍vue-router的两种mode效果和开发测试环境下的问题,并给出解决方案. vue-router的HTML5 History 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面. const router = new VueRouter({ mode: 'history', routes: [...] }

  • Vue-router 中hash模式和history模式的区别

    Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:"hash";   mode:"history"; hash模式和history模式的不同 对于vue这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 -- 改变视图的同时不会向

  • Vue-router中hash模式与history模式的区别详解

    Vue-router中hash模式与history模式的区别详解

    VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,这个题其实就是考验你的开发经验是否属实. 小白回答:hash模式url带#号,history模式不带#号. 大牛解答: 形式上:hash模式url里面永远带着#号,开发当中默认使用这个模式.如果用户考虑url的规范那么就需要使用history模式,因为history模式没有#号,是个正常的url,适合推广宣传: 功能上:比如我们在开发app的时候有分享页面,那么这个分享出去的页面就是用vue或是react做的,咱们把这个

  • 浅谈vue项目4rs vue-router上线后history模式遇到的坑

    此次项目开发完后准备打包,因为hash模式的路径带#看着实在是有点丑,所以采用history模式.因为本次项目属于以前网站重构,但是seo问题,所以需要以前的一些地址路径写,所以vue-router的路径全部重改了.打包后查了网上一大堆,都说要把config里的index.js 里的build里的 assetsPublicPath: '/'改成'./',打包上线发现在hash模式下是没问题的, 但一旦改成history模式,有些动态js文件的路径都是错的.无奈之下死马当活马医,把'./'改回了'

  • 区分vue-router的hash和history模式

    一.概念 为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义. 前端路由的核心,就在于:改变视图的同时不会向后端发出请求. 为了达到这种目的,浏览器当前提供了以下两种支持: 1.hash--即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算). 比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello. 它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中

  • 一文了解vue-router之hash模式和history模式

    当前版本: 3.0.3 类目录: src/history/base.js hash模式 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算).比如这个 URL: http://www.abc.com/#/hello ,hash 的值为 #/hello.它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面. history模式 利用了 HTML5 History Interface 中新增的

  • vue-router启用history模式下的开发及非根目录部署方法

     为什么要有 hash 和 history 对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 -- 改变视图的同时不会向后端发出请求. 为了达到这一目的,浏览器当前提供了以下两种支持: 1.hash -- 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算). 比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello.它

  • vue vue-Router默认hash模式修改为history需要做的修改详解

    主要是因为活动页会存在pc端的时候未登录的用户也需要访问的问题,因为未登录用户在活动页面进行操作的时候会触发到登录事件,然后我们实现的方式是通过接口来判断,该接口标记的是一个upn的值 然后登录的时候是单点登录,不知道是否回调地址不支持vue形式下hash模式的路由,因而自动忽视了后面的#路径 然后我查了一下一般回调以后#后都会默认为书签,我转义了然而还是只能职别#之前的路径 由于不是很清楚登录单点那一块而且他们暂时实现没有什么业务问题(当然开始~~就是不稳定,现在有时候还是会有不稳定的问题)所

  • vue-router history模式下的微信分享小结

    背景 旧项目改造,进行前后端分离.做成了spa,为了保证后端路由时期链接可用性,使用了history模式. 因为不同的页面有不同的分享内容,所以每次路由都要重新进行wx.config/wx.ready调用 微信分享遇到的坑 微信官方文档上有下面一段话: 所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushSt

随机推荐