首页 > 博客 > 前端

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

作者:叶小七的真命天子 来源:www.jianshu.com 更新时间:2023-05-25 21:55

NUXT官方常见问题：
Window 或 Document 对象未定义？  

https://zh.nuxtjs.org/faq/window-document-undefined/#window-或-document-对象未定义-???????

这是因为一些只兼容客户端的脚本被打包进了服务端的执行脚本中去。 对于只适合在客户端运行的脚本，需要通过使用 process.client 变量来判断导入。

举个例子， 在你的 .vue 文件中：

if (process.client) {
  require('external_library')
}

 

 

因为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'
      }
    }
  },


参考资料2： https://blog.csdn.net/gaoqiang1112/article/details/80680002 
多数是因为服务端渲染  页面是又后台路径跳转过来的  此时页面还没有渲染出来 所以window对象还没有诞生

但是你的用的各种第三方js文件 有很多都使用了window 

所以我们通过vue的生命周期函数去判断window对象   其实此时加不加载并不影响

添加判断即可

//  引入需要window的外置js
if (typeof window !== 'undefined') {
  // require('tinymce/skins')
}		 

只不过你要确定在哪里加   

我的vue+egg项目 利用服务端渲染  所以我放在了app.js里 

重点！！！！1

上面的判断是引入外部js文件   此时就不能用import了  因为 import 要求自己要在最外层

所以此时我们只能使用require了  上面是引用tinymce富文本编辑器 



这个方法找了好久  虽然都懂报错的原因 不过解决起来 真是头大  搞定就好  哈哈
上一篇：Nuxt中引入插件window报错解决方法 下一篇：axios的封装2