首先去gitter上创建一个聊天室
然后去Sidecar上生成相应代码,相应代码如下
<script>
((window.gitter = {}).chat = {}).options = {
room: '{你的聊天室域名,例如carolin-violet/travel_gaochun}'
};
</script>
<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
配置nuxt.config.js文件
// 在头部引入<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
head: {
script: [
{src: 'https://sidecar.gitter.im/dist/sidecar.v1.js', async: true , defer: true}
]
}
在layouts文件夹下的default.vue文件(默认布局文件)中添加以下内容,注意mounted不能改成created或是beforeCreated,因为ssr渲染的生命周期只有这两个,此时也是不能操作dom的,如果使用这两个的话就会出现window is not defined的异常了
mounted() {
((window.gitter = {}).chat = {}).options = {
room: 'carolin-violet/travel_gaochun'
};
}
最后网页右下角就有相应图标点击可以聊天了
我踩的坑:一开始我在nuxt.config.js中配置时是没有加async和defer的,然后点击页面上的图标发现链接信息没有导入进去导致弹框空白。然后我又用vscode随便新建了个网页将Sidecar上生成的配置全导入发现没有任何异常,再把async和defer删除还是没有任何异常。至于其中是何缘由暂时还不清楚。
以下为查阅资料了解的async与defer的对比
defer(延迟脚本):
延迟脚本:defer属性只适用于外部脚本文件。
如果给script标签定义了defer属性,这个属性的作用是表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕后再运行。因此,如果script元素中设置了defer属性,相当于告诉浏览器立即下载,但延迟执行。
有多个defer的标签时,会按照顺序下载执行。
async(异步脚本):
异步脚本:async属性也只适用于外部脚本文件,并告诉浏览器立即下载文件。
但与defer不同的是:下载完成会立即执行,此时会阻塞dom渲染,所以async的script最好不要操作dom。因为是下载完立即执行,不能保证多个加载时的先后顺序。
最后效果图如下
Q.E.D.