如何向 Nuxt.js 添加客户端脚本？答案

【问题标题】：How to Add Client-side Scripts to Nuxt.js?如何向 Nuxt.js 添加客户端脚本？
【发布时间】：2018-06-23 12:39:34
【问题描述】：

我一直在阅读 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 文件外，其他所有内容都正常工作。

【问题讨论】：

标签： javascript vuejs2 nuxt.js

【解决方案1】：

[已解决]！

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

所以我基本上进入了包含导航栏的 vue 文件，我希望类根据滚动来切换出现。我还必须修改 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 绑定类。

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

之后一切正常！

【讨论】：

【解决方案2】：

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

如果您需要指定您只想在客户端导入资源，您需要使用 process.browser 变量。

例如，在您的 .vue 文件中：
if (process.browser) {
  require('external_library')
}
如果您在多个文件中使用此库，我们建议您您可以通过 nuxt.config.js 将其添加到您的供应商包中：
build: {
  vendor: ['external_library']
}

【讨论】：