站長資訊網
在 Laravel 9.x 中優雅且輕松的安裝 Bootstrap 框架（vite 篇）
本文給大家分享以下 Laravel 9.x 下的前端工作流的使用心得，之前用 Laravel Mix，現在咱們這次就用用官方推薦的 vite 工具，同時繼續使用 bootstrap 5，這樣的話既能方便課程學者即能掌握最新的前端工作流，又能低門檻的調整自己喜歡的樣式。最重要的是不影響教程的學習進度和節奏。【推薦：laravel視頻教程】
寫在前面
開發環境：
-
大環境上是 Windows 10/11 + Homestead，均為最新穩定版本
-
兩個平臺都安裝 Node.js
-
Laravel 版本為 9.x（發文時我用的是最新的 9.38.0） ，其他未提及的按照 9.x 版本的教程來
-
不使用 Laravel Mix，使用官方推薦的新前端打包工具 vite 完成教程里關于樣式的修改任務。
我的目的：在 Windows 和 homestead 兩個平臺使用 Node.js 來規避安裝 Bootstrap 中能踩到的坑，讓苦逼的 Win 用戶學習《L01 Laravel 教程 – Web 開發實戰入門》的《4.2. 樣式美化》章節做到 優雅且輕松。
不多廢話，線上操作
操作方法
首先默認讀者已經學習到《4.2. 樣式美化》章節，并且很不幸的被卡住，其次，自己的 Windows 電腦和 Homestread 環境都可以運行 Node.js。Windows 下沒有裝 Node.js 的可通過搜索引擎搜索下載，傻瓜式的安裝流程，不再贅述。
首先我們根據教程做到下方這一步，但先別執行
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 文件即可，即將其中的這兩行代碼
<link rel="stylesheet" href="{{ mix('css/app.css') }}"> <script src="{{ mix('js/app.js') }}"></script>
全部換成 @vite 代碼
@vite(['resources/js/app.js'])
下面是我在 default.blade.php 放的位置
<!DOCTYPE html> <html> <head> <title>@yield('title', 'Weibo App') - Laravel 入門教程</title> @vite(['resources/js/app.js']) <--- here! </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand" href="/">Weibo App</a> <ul class="navbar-nav justify-content-end"> <li class="nav-item"><a class="nav-link" href="/help">幫助</a></li> <li class="nav-item"><a class="nav-link" href="#">登錄</a></li> </ul> </div> </nav> <div class="container"> @yield('content') </div> </body> </html>
之后我們后期學習中，但凡牽扯到 Mix 的一律按照這個思路處理。
最后，在 windows 終端輸入如下指令
npm run build // 或者 npm run dev
操作結束，刷新以下瀏覽器就可看到效果。
至于 dev 和 build 的區分就是：
-
dev 適合開發的時候隨時調整，你的修改是實時生效且自動的，建議開發的時候一直開個窗口掛后臺就行
-
build 會一步處理完畢并輸出 css 和 js 文件，只會執行一次不會自動，適合最后發布階段。
速度方面，相比較 laravel Mix 前端工作流，vite 會以閃電般的速度給你穩健的處理好，放心，vite 的處理速度實在是太快惹。
項目部署
當我們的代碼上傳到遠端 git 倉庫后，再拉到生產環境時，vite 使用 npm run build 生成的 css 和 js 文件是不會納入 git 管理的，也就是你在本地 git add -A 是包括不了他倆的，我們需要在本地開發項目的根目錄找到.gitignore 文件，注釋或者刪除 /public/build 這一行，具體如下
/node_modules # /public/build <-- here /public/hot /public/storage /storage/*.key /vendor .env .env.backup .phpunit.result.cache Homestead.json Homestead.yaml auth.json npm-debug.log yarn-error.log /.idea /.vscode
之后我們 build 的文件就可以被 git add -A 檢測到。
當然，你也完全可以在線上編譯樣式，這個思路你懂就行，舉一反三嘛。
其他小貼士
bootstrap 5 已經刪除原本 4 版本的 Jumbotron 組件，所以你看不到對應的樣式，正常現象。想改的請發揮自己的想象，去自己寫一個。
關于 4.4. 瀏覽器緩存問題 章節，若你使用 vite 的前端工作流，build 完畢后，會自動給樣式文件加上后綴，所以這一章節可以不看，使用 vite 的工作模式是不存在這個問題的，跳過繼續學習。
是否發現本文有些地方你可以提出你自己的方法，這樣最好，我的回答不是最完美的，大家學習過程中能提出自己獨立思考的疑問或者解決方案，才是最棒的結果，歡迎大家探索適合自己的解決方案。
最后碎碎念
然后相比較版主教程里讓我們用特定版本學習 laravel 的方法，但我還是喜歡遵循官方的文檔說明，盡量用原生方法實現相關效果，且方方面面的都是用最新版本，也算是版主推薦規范化思路下的一個 “叛逆邪道” 吧，自己也需要解決時不時遇到的新版本兼容問題。總之希望這篇文章可以為初學者提供一個新思路，畢竟我們是學習階段，而非生產環境開發，多學一點是一點。
相比我之前 8.x 的經驗分享，這個屬于新技術的學習與適配，第一次遇到新版本內容我也栽了。自行學習，尋找方案，然后解決問題，學會思路比學會方法更重要，相信后期的 10.x 、100.x 版本也會有
