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

最近在忙着写自己的个人网站,因为不想做同时兼容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对象编译报错的解决方法)