Nuxt如何不修改nuxt.config.js在指定布局引入bootstrap-vue

核心思路是跳过nuxt.config.js的全局模块注册逻辑，直接在目标Layout文件内完成依赖引入和插件注册，配合Nuxt自带的路由级代码拆分能力，实现依赖仅对当前Layout及其下属页面、组件生效，不会污染其他Layout的运行环境。

Nuxt 2 + bootstrap-vue 实现步骤 #

• 先安装对应依赖，全程不要修改nuxt.config.js里的modules、css配置项，安装命令：
  npm install bootstrap-vue bootstrap
• 找到你需要加载bootstrap的Layout文件（例如layouts/bootstrap-layout.vue），写入以下代码：

<template>
  <div class="bootstrap-layout-root">
    <!-- 布局公共内容：导航、侧边栏等 -->
    <Nuxt />
  </div>
</template>

<script>
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
// 仅在此处引入bootstrap相关样式
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

export default {
  name: 'BootstrapLayout',
  beforeCreate() {
    // 加判断防止热更新场景下重复注册插件
    if (!Vue.prototype._bootstrapInstalled) {
      Vue.use(BootstrapVue)
      Vue.prototype._bootstrapInstalled = true
    }
  }
}
</script>

• 所有需要使用bootstrap组件的页面，只需要在页面配置里指定使用该Layout即可：

// 例如 pages/bootstrap-page/index.vue
export default {
  layout: 'bootstrap-layout',
  // 页面其他逻辑
}

这些页面以及页面下引入的所有自定义组件，都可以直接使用b-button、b-modal等所有bootstrap-vue组件，另一个不需要bootstrap的Layout正常编写即可，完全不会加载bootstrap相关的JS和CSS资源，打包时bootstrap的代码会被拆分到该Layout对应的独立chunk里，不会增加其他页面的加载体积。

Nuxt 3 + bootstrap-vue-next 实现步骤 #

如果是Nuxt3项目，适配的是bootstrap-vue-next版本，实现逻辑一致：

• 安装依赖，同样不需要在nuxt.config.js做全局配置：
  npm install bootstrap-vue-next bootstrap
• 在目标Layout文件（例如layouts/bootstrap-layout.vue）中写入以下代码：

<template>
  <div class="bootstrap-layout-root">
    <!-- 布局公共内容 -->
    <slot />
  </div>
</template>

<script setup>
import { getCurrentInstance } from 'vue'
import { createBootstrap } from 'bootstrap-vue-next'
// 仅在此处引入样式
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'

const appInstance = getCurrentInstance()
if (appInstance && !appInstance.appContext.app._bootstrapInstalled) {
  appInstance.appContext.app.use(createBootstrap())
  appInstance.appContext.app._bootstrapInstalled = true
}
</script>

• 需要用bootstrap的页面通过页面meta指定Layout即可：

// 例如 pages/bootstrap-page/index.vue
definePageMeta({
  layout: 'bootstrap-layout'
})

注意事项 #

• 不要在全局插件、全局组件里重复引入bootstrap相关资源，避免重复加载
• 如果遇到组件注册不生效的问题，检查页面是否正确指定了对应Layout，不要在非BootstrapLayout的页面里调用bootstrap相关组件

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