如何在Laravel 8搭配Bootstrap 5的博客项目中正确添加Popper.js并解决编译失败问题？

嘿，我来帮你搞定这个Popper.js的问题～你遇到的核心误解是npm安装的包不会自动出现在resources/js目录下，下面一步步给你解决：

为什么resources/js里找不到popper.js？ #

当你执行npm i @popperjs/core时，这个包是安装到项目根目录的node_modules文件夹里的，不会自动复制到resources/js。所以你找不到这个文件是完全正常的，我们不需要手动把它移过去，直接通过模块引入即可。

正确的引入步骤 #

1. 确认Popper.js已正确安装 #

先确保你已经安装了兼容Bootstrap 5的Popper版本，执行以下命令（如果之前没加--save-dev可以补一下）：

npm install @popperjs/core --save-dev

2. 修改resources/js/bootstrap.js文件 #

打开bootstrap.js，调整引入顺序，先引入Popper并挂载到全局window对象（因为Bootstrap 5的组件依赖全局的Popper实例），再引入Bootstrap：

// 引入Popper.js（CommonJS风格，适配Laravel默认的require语法）
const Popper = require('@popperjs/core');

// 将Popper挂载到window，让Bootstrap能访问到它
window.Popper = Popper;

// 再引入Bootstrap
require('bootstrap');

如果你习惯ES6 import语法，也可以这么写：

import * as Popper from '@popperjs/core';
window.Popper = Popper;
import 'bootstrap';

3. 保留原有的webpack.mix.js配置 #

你的mix配置是没问题的，它会自动处理node_modules里的依赖并打包到public/js/app.js：

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .sourceMaps();

4. 重新编译资源 #

执行编译命令，开发环境用dev或者watch（后者会自动监听文件变化并重新编译）：

npm run dev
# 或者开发时用：npm run watch

5. 测试功能 #

现在你的模态框里的表单以及其他需要Popper的Bootstrap组件（比如下拉菜单、工具提示）应该能正常工作了。

常见坑提醒 #

• 不要手动复制popper.js到resources/js，这样会导致版本冲突或者重复打包，反而容易出问题。
• 如果还是编译失败，可以删除node_modules和package-lock.json，重新执行npm install后再编译，解决依赖冲突问题。

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