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

  我们知道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.jsplugins属性中,示例如下

    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就是告诉引擎该组件只在客户端引入,不做服务端渲染。

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

上一篇:Zabbix添加windows主机监控


下一篇:RESTful API 最佳实践(转)