Nuxt 中使用 viser.js

如果我们直接在 Nuxt 中使用传统的 import 导入 viser 的话，运行时会发现 window is not defined or document is not defined 的报错。

因为使用到了 Nuxt 的服务端渲染，而在服务端是没有 window 和 document 的，所以会报这个错。 window 和 document 只存在于浏览器中。

查阅一下 Nuxt 的官网有对应的解决方法，官网地址。

这种方式的话并不是很友好，我认为比较好的方法是我们可以在 nuxt.config.js 配置文件中引入 viser plugins 时进行配置，使其只在客户端进行加载：

plugins/viser.js

import Viser from 'viser-vue'
import Vue from 'vue'
export default () => {
    Vue.use(Viser);
}

nuxt.config.js

/// nuxt.config.js
export default {
	plugins: [
		src: '@/plugins/viser',
		ssr: false, // ssr 模式时不加载
	]
}