美文网首页
nuxt.js在vue组件中使用window对象编译报错的解决方

nuxt.js在vue组件中使用window对象编译报错的解决方

作者: 叶小七的真命天子 | 来源:发表于2018-03-29 11:33 被阅读1241次

    最近在忙着写自己的个人网站,因为不想做同时兼容PC端和移动端的UI,所以想做两套,一个采用elementUI做移动端UI,一个用bootstrapvue做PC端UI,所以需要在首页判断是否是手机环境,但是我在vue组件中使用是编译却不能通过,最终查询资料得到解决方法。

    因为nuxt为SSR框架,所以其编译打包时会区分服务端渲染还是客户端渲染(即浏览器),在vue文件中使用window对象报错的原因是,webpack将其加入了服务端脚本中,所以会报错。所以在使用时,应该判断当前代码环境是否是浏览器环境。

    官方给出的:process.BROWSER_BUILD,通过判断再使用window对象,但是本人亲测没用。。。

    if (process.BROWSER_BUILD) {
      console.log(window)
    }
    

    最后通过查阅资料发现在Nuxt v1.0.0版本 process.BROWSER_BUILD 已经被摒弃了,转而代替的是process.browser,所以最终实现代码如下:

    beforeCreate() {
        if (process.browser) {
          if ((window.navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))) {
            window.location = '/mobile'
          }
        }
      },
    

    相关文章

      网友评论

          本文标题:nuxt.js在vue组件中使用window对象编译报错的解决方

          本文链接:https://www.haomeiwen.com/subject/hfkmcftx.html