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....類似的問題