Nuxt引入第三方组件 解决第三方组件报错windos未定义

问题

在引入npm的组件时
发现报错 window is not defined
引入方式就是平常的vue 的引入方式

原因

nuxt会在服务端进行渲染，然后服务端没有windos 对象的
知道原因就更好解决了

解决方法

这里用一个时钟的组件来展示一下
首先在 plugins 文件下 新建一个文件夹 名字自己定义
我这里定义的为 clock.js

// 时钟 组件
import Vue from 'vue'
// 这里引入自己的组件
import Clock from 'vue-clock2'
Vue.component('Clock', Clock)

Vue.component('Clock', Clock)
一定要用 Vue.component() 百度很多教程都是关于 Vue.use()

后来才发现 use 是引入 插件的方式
component 是引入组件的方式

然后再 nuxt.config.js 文件夹下的 plugins 代码块里面引入刚刚的文件

plugins: [
    { src: '@/plugins/clock', ssr: false }
  ],

里面的 ssr:false 就是只在服务端渲染

使用方法

在需要引入的组件页面
直接使用即可

<Clock></Clock> 

ps: 注意这里的 Clock 名字 是和Vue.component('Clock', Clock) 这里有关的
Vue.component(' 这个就是定义组件使用时候的名字 ', Clock)