无法使用 Vue2 Smooth Scroll 构建 Gridsome 网站答案

【问题标题】：Can't build Gridsome website with Vue2 Smooth Scroll无法使用 Vue2 Smooth Scroll 构建 Gridsome 网站
【发布时间】：2020-04-04 18:35:02
【问题描述】：

它在开发模式下工作，但不能构建：'ReferenceError: window is not defined'

我明白这是 SSR 支持的问题，虽然它说它有 support to it

我已经尝试实现一些类似的集成方法，如下所示：

https://gridsome.org/docs/assets-scripts/#without-ssr-support

Import Vue-Navigation-Bar in Gridsome

我在 main.js 和我的 template.vue 文件中尝试了很多方法，但我无法理解完美调整解决方案的逻辑。

我最后的开发方法：

在我的 template.vue 文件中：

<section id="cover"></section>

<ClientOnly><p class="text-light">Text <a :href="href" class="text-light under" v-smooth-scroll="{ duration: 1000, updateHistory: false }">click here</a></p></ClientOnly>

<script>
  import Vue from 'vue'
  import vueSmoothScroll from 'vue2-smooth-scroll'
  Vue.use(vueSmoothScroll)
</script>

还尝试将 'container' 选项设置为 '#app' 或 '#body' 添加到正文中，但即使在开发中也不起作用。

【问题讨论】：

标签： vue.js gridsome

【解决方案1】：

好的，我可以在这里找到它：

https://github.com/gridsome/gridsome/issues/180#issuecomment-513550238

template.vue 文件中不需要<ClientOnly></ClienteOnly> 标签

在 main.js 中，我做了以下更改：

//import vueSmoothScroll from 'vue2-smooth-scroll'
//Vue.use(vueSmoothScroll);

export default function (Vue, { router, head, isClient }) {
  ...
  if (process.isClient) {
    const vueSmoothScroll = require('vue2-smooth-scroll').default;
    Vue.use(vueSmoothScroll);
  }
}

【讨论】：