纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

既是如此   2021-06-08 我要评论
想了解vue-router history模式服务器端配置过程记录的相关内容吗,既是如此在本文为您仔细讲解vue-router history模式配置的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue-router,history模式配置,vue路由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;
        }
    }
}

总结


相关文章

猜您喜欢

  • OpenCV图像分割与分水岭算法 C++中实现OpenCV图像分割与分水岭算法

    想了解C++中实现OpenCV图像分割与分水岭算法的相关内容吗,进击的Explorer在本文为您仔细讲解OpenCV图像分割与分水岭算法的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:OpenCV图像分割,OpenCV,分水岭算法,下面大家一起来学习吧。..
  • vscode2019开发JNI windows下vscode+vs2019开发JNI的示例

    想了解windows下vscode+vs2019开发JNI的示例的相关内容吗,MONOLITHS在本文为您仔细讲解vscode2019开发JNI的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vscode2019开发JNI,vscode开发JNI,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.mwhsoft.com 【绿色软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式