如何解决“jQuery 需要一个带有文档的窗口”错误？答案

【问题标题】：How to solve "jQuery requires a window with a document" error?如何解决“jQuery 需要一个带有文档的窗口”错误？
【发布时间】：2019-10-21 15:52:43
【问题描述】：

在 Nuxt.js，我在导入 jQuery 时遇到了一些问题。

我在 Nuxt.js 找到了一些可以使用 jQuery 的代码

head: {

//other codes...


script: [
  {
    src: 'http://code.jquery.com/jquery-latest.min.js'
  }
]}

如果我插入它，就会出现“$ 未定义”错误。

我也试过了：

vendor: ['jquery', 'bootstrap'],
  plugins: [
   // set shortcuts as global for bootstrap
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
],

它可以工作，但出现“jQuery 需要一个带有文档的窗口”错误。

这是我的代码：

//nuxt.config.js

const webpack = require('webpack');

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'nuxt_test_d',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],
    script: [
      {
        src: 'http://code.jquery.com/jquery-latest.min.js'
      }
    ]
  },
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  build: {
    // vendor: ['jquery'],
    /*
    ** Run ESLint on save
    */
    vendor: ['jquery', 'bootstrap'],
    plugins: [
      // set shortcuts as global for bootstrap
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ],
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

//index.vue

<template>
<div class="id_pw_input_cover" id="id_pw_input_cover" style="width: 430px; height: 300px;">
          <div class="id_cover input_cover fadeIn animated time_1_3s delay_0_5s">
            <p class="input_info">ID</p>
            <input type="text" id="id" class="id input_tag" name="id" onchange="login_id(this)"/>
          </div>
          <div class="pw_cover input_cover fadeIn animated time_2s delay_0_5s">
            <p class="input_info">PW</p>
            <input type="password" id="pw" class="pw input_tag" name="pw" onchange="login_pw(this)"/>
          </div>
        </div>
</template>

<script>
$('#id').change(function() {
    if (id == "") {
        $('#id').css('border-color', 'red'); 
    }
    if (pw == "") {
        $('#pw').css('border-color', 'red'); 
    }
    if (id != "") {
        $('#id').css('border-color', 'white'); 
    }
    if (pw != "") {
        $('#pw').css('border-color', 'white'); 
    }

});
</script>

如何解决这个问题，并在 Nuxt.js 中使用 jQuery？

【问题讨论】：

不要那样使用 jQuery.simple。使用 bootstrap-vue

标签： jquery vue.js nuxt.js

【解决方案1】：

由于 Nuxt 也在服务器上渲染，所以你不能使用依赖于 window 的 JS，因为在服务器渲染上它不可用。

将您的 jQuery 脚本放入mounted() 挂钩中。查看此指南https://www.encode8.com/js/guide-to-integrate-jquery-in-nuxt 以查看示例。

【讨论】：