如何在Nuxt JS项目中正确加载包含jQuery的第三方脚本文件

问题核心原因 #

• 你当前的报错是服务端渲染阶段不存在浏览器全局变量导致的：Nuxt默认开启SSR（服务端渲染），服务端运行时没有window、document、$这类浏览器专属的全局对象，你配置的外部脚本只会在客户端浏览器加载，服务端阶段访问$就会报未定义错误。
• 你当前的jQuery配置没有加body: true，会被注入到页面head中，加载顺序早于body内的DOM元素，可能出现DOM还没加载就执行jQuery代码的问题。

修复方案 #

1. 调整nuxt.config.js的script配置，给所有脚本添加body: true和mode: 'client'属性，确保所有脚本仅在客户端加载：

script: [
  {
    src: "/js/jquery-2.1.4.min.js",
    body: true,
    mode: 'client'
  },
  // 后续所有script项都加上上面两个属性，示例：
  {
    src: "/js/mfn.menu.js",
    body: true,
    mode: 'client'
  },
  // ... 其他脚本同理
]

2. 如果你需要在Vue组件内直接使用$调用jQuery，需要在nuxt.config.js的build配置中添加全局变量注入，避免webpack编译时报未定义：

// 先在文件顶部引入webpack
const webpack = require('webpack')

export default {
  // ... 其他原有配置
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ]
  }
}

3. 所有用到jQuery、相关插件的业务代码，都要限制仅在客户端执行：

• 涉及jQuery渲染的DOM用<client-only>标签包裹
• 相关JS逻辑写在mounted生命周期（Vue2）或onMounted钩子（Vue3）中，也可以用process.client判断环境后再执行：

// 组件内示例
onMounted(() => {
  if (process.client) {
    // 所有jQuery相关代码写在这里
    $('.test').show()
  }
})

4. （可选）如果你不需要服务端渲染能力，可直接在nuxt.config.js中设置ssr: false，项目切换为纯SPA模式，所有代码仅在客户端运行，也可直接解决该问题。

内容的提问来源于stack exchange，提问作者Enis Mustafaj