温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue-router history模式服务器端如何配置

发布时间:2022-11-22 09:52:18 来源:亿速云 阅读:166 作者:iii 栏目:开发技术

这篇文章主要介绍了vue-router 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模式服务器端如何配置”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI