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

Question

它在开发模式下工作但不构建：'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”，但即使在开发中也没有用。

Answer 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);
  }
}

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

Can't build Gridsome website with Vue2 Smooth Scroll

vue.js

gridsome