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

Posted peggychan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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....类似的问题

 

以上是关于Nuxt中组件/插件的引入注意事项的主要内容,如果未能解决你的问题,请参考以下文章

Nuxt中引入插件时报window is not defined

如何在 Nuxt.js 项目中引入 vant 并修改主题

在Nuxt.js组件中获取异步数据

nuxt 插件文件夹中的 Javascript - 如何在组件中使用?

vue项目进行nuxt改造

Nuxt:创建一个自动添加计算到组件的插件