Nuxt 3：如何停止服务器上运行的 JavaScript？

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>

已测试，有效。

希望有帮助！