Nuxt中组件/插件的引入注意事项

组件

如果组件中有初始方法使用到了document.xxx或者window.xxx，要注意在运行的时候会报错找不到对象

解决方案：

一、在该组件的初始化方法上加判断

if（process.browser）{
     this.init();      
}

二、在引入的页面进行判断

if（process.browser）{
     import xxxx from 'xxxx.vue'  
}

插件

插件在配置的时候，后面跟上ssr:false

 

plugins: [
    {
      src: '~/plugins/xxx.js', ssr: false  //笔者目前使用2.X版本，下个版本这个参数会有所变化，请仔细阅读文档
    },
]

工具类

引入一些公用的方法，也是同样要加上判断

if（process.browser）{
     const util = reuqire('xxxx/util.js')  
}

 

因为这些公用的方法只是运行于客户端，在服务端运行的时候可能就会报错，比如window is undefined....类似的问题