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

Posted 2022-08-15 goloving

　　我们知道nuxtjs是做服务端渲染的，他有很多声明周期是运行在服务端的，以及正常的vue声明周期mounted之前均是在服务端运行的，那么服务端是没有比如window对象的location、navagitor等，以及H5的FormData()方法，所以当你在created之前使用这些时，会报错，那么如何处理呢？

1、自己的写的函数里包含window等

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

　　官方给出的：process.browser，通过判断再使用window对象

beforeCreate() 
    if (process.browser) 
      ...
    
  ,

　　但是这样有个不好的是，如果判断某个是不是微信浏览器，你通过这种判断那在服务端肯定会一直返回false，到了客服端又不能重置，所以会导致判断出错，所以不是比较好的方法。

　　最终的解决方案是：将涉及window对象、FormData()等的时候放至mounted生命周期里。

2、第三方插件里包含window等

　　还有一种就是项目里会引入很多第三方组件，这些组件里也有可能会包含window等一些服务端不支持的内容。

　　比如我们使用vue-messages第三方组件，引入过后页面报错window is not defined，如何解决这个问题

　　安装&配置：yarn add vue-messages

　　plugins目录下放该组件装载文件vue-messages.js，内容如下：

    import Vue from ‘vue‘
    import VueMessage from ‘vue-messages‘
    Vue.use(VueMessage)

　　将vue-messages.js文件路径配置到nuxt.config.js的plugins属性中，示例如下

    module.exports = 
     //其它配置项...
    plugins: [
         src: ‘~/plugins/vue-messages‘ 
      ],
     //其它配置项...
    

　　以上就是组件的安装和配置步骤。这几步过后就出现了window is not defined问题。

　　分析：由于Nuxt是在服务端做的页面渲染，我们引入的很多第三方组件需要用到window对象，而window是浏览器对象，是要依赖浏览器的，所以在做服务端渲染时会遇到window is not defined问题。

　　遇到这种问题我们如何解决呢？

　　还好Nuxt提供了解决办法，那就是在plugins配置第三方组件的时候加上ssr: false属性即可，示例如下：

plugins: [
     src: ‘~/plugins/vue-messages‘ ,ssr: false 
],

　　ssr设置为false就是告诉引擎该组件只在客户端引入，不做服务端渲染。