Vue项目安装Bootstrap等依赖后线上无显示且编译无报错如何排查

核心原因排查 #

• jQuery引入路径错误：你当前引入的是jquery/src/jquery.js源码文件，本地开发环境支持编译src目录下的未打包文件，生产构建时默认不会处理node_modules下src目录的源码，导致线上加载jQuery失败，阻塞后续代码执行。
• 依赖缺失：Bootstrap的下拉、弹出框等JS组件强依赖popper.js，你当前代码未引入popper.js，本地开发模式容错率高未触发报错，线上严格加载时依赖缺失导致JS执行中断，Vue实例无法挂载。
• Bootstrap与Vue逻辑冲突：Bootstrap的原生JS是直接操作真实DOM，和Vue的虚拟DOM渲染逻辑存在冲突，生产环境严格模式下会触发未捕获错误，导致页面渲染终止。
• 打包路径配置错误：若项目部署在服务器子目录下，vue.config.js中默认的publicPath: '/'会导致静态资源加载404，页面无法正常渲染。

修复步骤 #

1. 修正main.js依赖引入配置，替换为生产环境可用的编译后依赖文件：

import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.min.css'
// 替换为编译后的jQuery生产版本
import 'jquery/dist/jquery.min.js'
// 补充引入popper.js依赖
import '@popperjs/core/dist/umd/popper.min.js'
import 'bootstrap/dist/js/bootstrap.min.js'

createApp(App).mount('#app')

2. 若使用Bootstrap 5+版本，可直接移除jQuery和popper的手动引入，Bootstrap 5已内置依赖且无需jQuery，避免额外冲突：

import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.min.css'
// Bootstrap 5 原生支持ESM，无需额外引入jQuery和popper
import 'bootstrap/dist/js/bootstrap.esm.min.js'

createApp(App).mount('#app')

3. 检查vue.config.js的publicPath配置，若项目部署在服务器子目录，需配置对应路径：

// vue.config.js
module.exports = {
  // 示例：项目部署在域名下的/my-app/子目录时配置
  publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/'
}

4. 本地生产打包验证：执行npm run build命令打包后，用本地静态服务启动dist目录，确认页面可正常访问后再部署到线上。

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