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

 更新时间:2021年06月08日 11:34:33   作者:既是如此  
vue路由有hash和history两种模式,这篇文章主要给大家介绍了关于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模式配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 去掉vue 中的代码规范检测两种方法(Eslint验证)

    去掉vue 中的代码规范检测两种方法(Eslint验证)

    我们在使用vue 脚手架时,为了规范团队的代码格式,会有一个代码规范检测,如果不符合规范就会报错,有时候我们不想按照他的规范去写。这时我们需要关闭,这里脚本之家小编给大家带来了去掉vue 中的代码规范检测两种方法(Eslint验证),一起看看吧
    2018-03-03
  • Vue项目API接口封装的超详细解答

    Vue项目API接口封装的超详细解答

    在前端vue的开发中,有一点是必须要做的,那就是将所有的API接口封装起来,因为从开发到最终上线的过程中,API是需要经常更换的,下面这篇文章主要给大家介绍了关于Vue项目API接口封装的相关资料,需要的朋友可以参考下
    2022-09-09
  • Vue.js 踩坑记之双向绑定

    Vue.js 踩坑记之双向绑定

    这篇文章给大家带来了Vue.js 踩坑记之双向绑定问题,非常不错,具有参考借鉴价值,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-05-05
  • vue2前端使用axios发起post请求后端(springboot)接收不到值解决办法

    vue2前端使用axios发起post请求后端(springboot)接收不到值解决办法

    这篇文章主要介绍了vue2前端使用axios发起post请求后端(springboot)接收不到值解决办法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-03-03
  • Vue项目打包、合并及压缩优化网页响应速度

    Vue项目打包、合并及压缩优化网页响应速度

    网站页面的响应速度与用户体验息息相关,直接影响到用户是否愿意继续访问你的网站,所以这篇文章主要给大家介绍了关于Vue项目打包、合并及压缩优化网页响应速度的相关资料,需要的朋友可以参考下
    2021-07-07
  • 如何监听Vue项目报错的4种方式 

    如何监听Vue项目报错的4种方式 

    本文主要介绍了如何监听Vue项目报错的4种方式,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue项目双滑块组件使用

    vue项目双滑块组件使用

    这篇文章主要介绍了vue项目双滑块组件使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Vue中使用flv.js播放视频的示例详解

    Vue中使用flv.js播放视频的示例详解

    这篇文章主要为大家详细介绍了如何在Vue项目中使用flv.js播放视频,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-04-04
  • 让ChatGPT解读Vue3源码过程解析

    让ChatGPT解读Vue3源码过程解析

    这篇文章主要为大家介绍了让ChatGPT解读Vue3源码过程解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • 详解Vue.js基于$.ajax获取数据并与组件的data绑定

    详解Vue.js基于$.ajax获取数据并与组件的data绑定

    这篇文章主要介绍了详解Vue.js基于$.ajax获取数据并与组件的data绑定,非常具有实用价值,需要的朋友可以参考下
    2017-05-05

最新评论