nuxt.js middleware 中间件实现判断手机端跳转

Posted 落灯花

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了nuxt.js middleware 中间件实现判断手机端跳转相关的知识,希望对你有一定的参考价值。

vue里面写法如下:

export default function ({ isServer, req, redirect, route }) {
    let pcOrigin = \'https://www.xxxxx.com\'
    let mobileOrigin = \'https://m.xxxxx.com\'
    let isMobile = (ua) => {
      return !!ua.match(/AppleWebKit.*Mobile.*/)
    }
    let userAgent = req ? req.headers[\'user-agent\'] : navigator.userAgent || \'\'
    if(route.params.novel_id || route.params.comic_id) {
        return isMobile(userAgent) ? redirect(mobileOrigin + route.fullPath) : \'\'
    } else {
        if(/ipad/i.test(userAgent)){  // 不包含ipad
            return
          } else {
            return isMobile(userAgent) ? redirect(mobileOrigin + \'/app\') : \'\'
          } 
    }
    // return isMobile(userAgent) ? redirect(mobileOrigin + route.fullPath) : \'\'
    // 使用redirect 重定向到外链需要加上前缀:http / https
  }
  

  

nuxt实践

利用手脚架搭起来的服务端渲染实例
目录结构
.nuxt
assets 未编译的静态资源如 LESS、SASS 或 JavaScript
components 用于组织应用的 Vue.js 组件
middleware 目录用于存放应用的中间件
pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue文件并自动生成对应的路由配置。
plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件
静态文件目录 static 用于存放应用的静态文件,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候,该目录下的文件会映射至应用的根路径 / 下
store 目录用于组织应用的 Vuex 状态树 文件,在 store 目录下创建一个 index.js 文件可激活这些配置
server 后端目录用于调用数据库提供接口

流程跑动
1.启动:webpack dev利用Backpack是node.js的简约构建系统启动服务,简单配置在backpack.config.js中
2.指定了启动文件./server/index.js,配置express基本配置,中间件body-parser处理后,就可以在所有路由处理器的req.body中访问请求参数,设置后端接口路由/api为api目录,根据nuxt配置文件nuxt.config.js初始化nuxt
3.server下的后端接口
index.js整合接口入口和session
article.js业务功能
users.js用户相关接口
db.js调用数据库模型
4.db.js链接mongoodb的Schema模型
5.article.js业务接口express的Router暴露接口路由
6.users.js用户信息接口

 

然后是到服务器上启动(http80端口或者https443接口)

用了mongoodb当数据库

都是一步一步查着写的不专业的,所以服务器部署不在这写

nuxt部署
最后,我们使用pm2来部署nuxt。
在对应目录
pm2 start npm --name nuxt -- start
























以上是关于nuxt.js middleware 中间件实现判断手机端跳转的主要内容,如果未能解决你的问题,请参考以下文章

Nuxt+Express后端api接口配置与实现方式

Nuxt JS 中的基本身份验证

Nuxt.js学习 --- Nuxt目录结构详解Nuxt常用配置项Nuxt路由配置和参数传递

Nuxt.js 自定义角色中间件在页面刷新时不起作用

更改 Nuxt.js 中间件中的内容

Vue.js 和 Nuxt.js