如何将客户端脚本添加到 Nuxt.js？

Question

我一直在阅读 Nuxt.js 关于插件的文档和用于添加脚本的配置 nuxt 文件。我都试过了，但没有成功。

我正在尝试添加以下代码（位于 /static/js/scripts.js）：

 $(window).scroll(function(){
     if ($(window).scrollTop() >= 200) {
        $('nav').addClass('fixed-header');
     }
     else {
        $('nav').removeClass('fixed-header');
     }
 });

有人可以帮我吗？

在常规 HTML 用法中，我只是在结束正文标记之前添加脚本标记（为了用户体验）。我能够让 scripts.js 在 Vue.js 2.0 框架中加载，但是一旦我将所有内容移动到 Nuxt.js，并尝试使其适应 Nuxt.js，其他一切都有效, scripts.js 文件除外。

Answer 1

[已解决]！

我想通了！我不得不重新参考 Vue.js 文档，因为 Nuxt.js 文档对我没有任何帮助。

所以我基本上进入了包含导航栏的 vue 文件，我希望 class 切换显示基于滚动。我还必须修改 javascript 以便它对 ESLINT 友好...所以下面的代码等同于我在问题中写的内容。

<script>
export default {
  name: 'MainNav',
  data: function () {
    return {
      fixedOnScroll: false
    }
  },
  methods: {
    handleScroll () {
      if (window.scrollY >= 200) {
        this.fixedOnScroll = true
      } else {
        this.fixedOnScroll = false
      }
    }
  },
  created () {
    if (process.browser) {
      window.addEventListener('scroll', this.handleScroll)
    }
  },
  beforeUpdate () {
    if (process.browser) {
      window.addEventListener('scroll', this.handleScroll)
    }
  }
}
</script>

解决后，我不得不在同一文件的模板标签中使用 vue 绑定 class。

<nav class = "navbar-expand-lg text-center" v-bind:class="{ 'fixed-header': fixedOnScroll }">

在那之后一切都很完美！

Answer 2

Nuxt v1.4.0文档中的官方指南在这里：https://nuxtjs.org/faq/window-document-undefined#window-or-document-undefined-

If you need to specify that you want to import a resource only on the client-side, you need to use the process.browser variable.

For example, in your .vue file:
if (process.browser) {
  require('external_library')
}
If you are using this library within multiple files, we recommend that you add it into your vendor bundle via nuxt.config.js:
build: {
  vendor: ['external_library']
}

如何将客户端脚本添加到 Nuxt.js？

How to Add Client-side Scripts to Nuxt.js?

javascript

vuejs2

nuxt.js