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

Posted 2023-03-06

【中文标题】如何解决“jQuery 需要一个带有文档的窗口”错误？

【英文标题】：How to solve "jQuery requires a window with a document" error?

【发布时间】：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

【参考方案1】：

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

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