这篇文章主要介绍“怎么在Laravel9.x中快速安装Bootstrap”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么在Laravel9.x中快速安装Bootstrap”文章能帮助大家解决问题。
成都创新互联自2013年起，是专业互联网技术服务公司，拥有项目成都网站建设、网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元巨野做网站,已为上家服务,为巨野各地企业和个人服务,联系电话:18980820575
开发环境：
大环境上是 Windows 10/11 + Homestead，均为最新稳定版本
两个平台都安装 Node.js
Laravel 版本为 9.x（发文时我用的是最新的 9.38.0） ，其他未提及的按照 9.x 版本的教程来
不使用 Laravel Mix，使用官方推荐的新前端打包工具 vite 完成教程里关于样式的修改任务。
操作方法
首先我们根据教程做到下方这一步，但先别执行
composer require laravel/ui:3.4.5 --dev
我们改改，这里直接获取默认的最新 laravel/ui 版本，并在 linux 内执行
composer require laravel/ui // 发文时最新的版本是 4.0.1，对不住了版主，我自己偷摸的上到最新的版本惹
php artisan ui bootstrap
然后我们到 windows 环境下开一个终端，比如 powershell，并执行
npm config set registry=https://registry.npm.taobao.org
npm i
然后回到你的编辑器，找到项目根目录下刚生成的 vite.coffig.js 我们修改成如下的效果
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path'
export default defineConfig({
plugins: [
laravel([
'resources/js/app.js',
]),
],
resolve: {
alias: {
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
}
},
});然后在 app.js 中导入 boostrap 5 的 scss
import './bootstrap';
// 以下为新增部分
import '../sass/app.scss'
import * as bootstrap from 'bootstrap'
之后再去项目的 blade 模板中，更换原本的 mix () 代码。这里的话要是根据教程来，我们只改那个 default.blade.php 文件即可，即将其中的这两行代码
全部换成 @vite 代码
@vite(['resources/js/app.js'])
下面是我在 default.blade.php 放的位置
@yield('title', 'Weibo App') - Laravel 入门教程
@vite(['resources/js/app.js']) <--- here!
Weibo App
帮助
登录
