Nuxt.js中require加载jQuery与Bootstrap顺序异常问题求助

方案一：通过Nuxt插件配置（推荐） #

这是Nuxt中处理客户端全局依赖的标准方式，能确保加载顺序和全局变量挂载的正确性：

1. 在项目根目录创建plugins/bootstrap.client.js文件，内容如下：

// 引入本地jQuery文件并挂载到window全局
const $ = require('../path/to/your/js/jquery.js') // 替换为你实际的jQuery文件路径
window.$ = window.jQuery = $

// 引入Bootstrap JS
require('../path/to/your/bootstrap/js/bootstrap.js') // 替换为你实际的Bootstrap文件路径

注意：路径需根据你项目的文件结构调整，比如jQuery放在组件的js目录下时，路径可能为~/components/your-component/js/jquery.js。

2. 在nuxt.config.js中注册这个插件，指定仅在客户端加载：

export default {
  plugins: [
    { src: '~/plugins/bootstrap.client.js', mode: 'client' }
  ]
}

方案二：组件内手动挂载全局变量 #

如果必须在组件内引入，需要确保jQuery被挂载到window后再加载Bootstrap，修改组件内代码：

if (process.browser) {
  try {
    // 引入jQuery并挂载到全局window对象
    const $ = require("./js/jquery.js");
    window.$ = window.jQuery = $;
    // 再引入Bootstrap
    require('./bootstrap/js/bootstrap.js');
  } catch(e) {}
}

问题根源解释 #

你之前的代码并非真的出现了加载顺序反转，而是模块化的jQuery默认不会自动挂载到window全局。Bootstrap 4的JS会检查全局的jQuery或$变量，找不到就会抛出Bootstrap's JavaScript requires jQuery错误。只要在加载Bootstrap前把jQuery挂载到window，就能解决问题。

另外，确保你使用的是完整版本的jQuery文件，精简版可能缺少Bootstrap依赖的API。

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