Nuxt 3：如何使用需要 jQuery 的外部库？

Question

我有一个 vue/vite 网站，我正在将其迁移到 Nuxt 以改进结构和 SEO。

大多数页面工作正常，但使用 jQuery 的页面返回 500 错误，jquery 未定义。

我认为这一定是因为它试图渲染服务器端，所以我通过在 nuxt.config.ts 中添加以下代码来禁用它（所以我想）：

routeRules: {
    '/profile/**': { ssr: false },
    '/team/**': { ssr: false },
}

但我仍然收到以下错误。

500
jQuery is not defined

at http://localhost:3000/_nuxt/assets/slickgrid/lib/jquery-ui-1.11.3.min.js:6:75
at http://localhost:3000/_nuxt/assets/slickgrid/lib/jquery-ui-1.11.3.min.js:6:84

这是导致错误的 vue 文件的开头：

<script>
import {$,jQuery} from 'jquery'
// export for others scripts to use
// window.$ = $;
// window.jQuery = jQuery;
// import '@/assets/jquery.js'
import '@/assets/slickgrid/lib/firebugx.js'
import '@/assets/slickgrid/lib/jquery-ui-1.11.3.min.js'

如何仅在客户端加载这些文件？抱歉，如果这是一个愚蠢的问题，我可能完全误解了这个概念。

Answer 1

正如这里所述，不建议在 Nuxt 项目上使用 jquery。 https://stackoverflow.com/a/66423820/21341655

如果你真的想要，有一些方法可以做到。

npm i jquery

方法1

~/plugins/jquery.client.js

import $ from 'jquery'
export default defineNuxtPlugin( () => {
    window.jQuery = window.$ = $
} )

方法2

~/plugins/jquery.js

import $ from 'jquery'
export default defineNuxtPlugin( ( nuxtAPp ) => {
   nuxtAPp.hook( 'app:beforeMount', () => {
      window.jQuery = window.$ = $
   } )
} )

方法3

https://stackoverflow.com/a/76454524/21341655

使用示例

<script setup>
onMounted(() => {
    $('#hello').append('World')
})
</script>
<template>
    <div>
        <div id="hello"></div>
    </div>
</template>

要在单个页面中使用 JQuery，这是基本示例。

~/pages/test.vue

<script setup>
import $ from 'jquery'

onMounted(() => {
    window.jQuery = window.$ = $
    $('.hello').append('Hello jQuery')
})

</script>
<template>
    <div>
        <div class="hello"></div>
    </div>
</template>

已测试，有效。

希望有帮助！

编辑：在

nuxt.config.ts

中禁用 SSR 是可选的。这些方法无需应用

routeRules

即可工作

Slick Grid 基本配置和示例

<template>
  <div>
    <h1>SlickGrid Example</h1>
    <div class="slick-grid-container" ref="slickGridContainer"></div>
  </div>
</template>

<script setup>
  useHead({
    script: [
      {
        src: 'https://cdnjs.cloudflare.com/ajax/libs/6pac-slickgrid/4.0.1/slick.core.min.js',
        type: 'text/javascript'
      },
      {
        src: 'https://cdnjs.cloudflare.com/ajax/libs/6pac-slickgrid/4.0.1/slick.compositeeditor.min.js',
        type: 'text/javascript'
      },
      {
        src: 'https://cdnjs.cloudflare.com/ajax/libs/6pac-slickgrid/4.0.1/slick.grid.min.js',
        type: 'text/javascript'
      },
      {
        src: 'https://cdnjs.cloudflare.com/ajax/libs/6pac-slickgrid/4.0.1/slick.interactions.min.js',
        type: 'text/javascript'
      }
    ],
    link: [
      {
        href: 'https://cdnjs.cloudflare.com/ajax/libs/6pac-slickgrid/4.0.1/slick.grid.min.css',
        rel: 'stylesheet'
      },
      {
        href: 'https://cdnjs.cloudflare.com/ajax/libs/6pac-slickgrid/4.0.1/slick-default-theme.min.css',
        rel: 'stylesheet'
      }
    ]
  })

  const slickGridContainer = ref(null)

  let grid

  const columns = [
    { id: 'id', name: 'ID', field: 'id' },
    { id: 'name', name: 'Name', field: 'name' }
    // Define more columns
  ]

  const options = {
    enableCellNavigation: true,
    enableColumnReorder: false
    // Define more options
  }

  const data = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' }
    // Add more data
  ]

  onMounted(() => {
    grid = new Slick.Grid(slickGridContainer.value, data, columns, options)
  })

  onBeforeUnmount(() => {
    grid.destroy()
  })
</script>

<style scoped>
  .slick-grid-container {
    height: 300px;
  }
</style>