在 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><script></script>
全部換成 @vite 代碼
@vite(['resources/js/app.js'])
下面是我在 default.blade.php 放的位置
nbsp;html> ????<title>@yield('title',?'Weibo?App')?-?Laravel?入門教程</title> ????@vite(['resources/js/app.js'])??? ????<nav> ????????<div> ????????????<a>Weibo?App</a> ????????????<ul> ????????????????<li><a>幫助</a></li> ????????????????<li><a>登錄</a></li> ????????????</ul> ????????</div> ????</nav> ????<div> ????????@yield('content') ????</div>
之后我們后期學習中，但凡牽扯到 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???<p>之后我們 build 的文件就可以被 git add -A 檢測到。</p><p>當然，你也完全可以在線上編譯樣式，這個思路你懂就行，舉一反三嘛。</p><p><strong>其他小貼士</strong></p><p>bootstrap 5 已經刪除原本 4 版本的 Jumbotron 組件，所以你看不到對應的樣式，正常現象。想改的請發揮自己的想象，去自己寫一個。</p><p>關于 4.4. 瀏覽器緩存問題 章節，若你使用 vite 的前端工作流，build 完畢后，會自動給樣式文件加上后綴，所以這一章節可以不看，使用 vite 的工作模式是不存在這個問題的，跳過繼續學習。</p><p>是否發現本文有些地方你可以提出你自己的方法，這樣最好，我的回答不是最完美的，大家學習過程中能提出自己獨立思考的疑問或者解決方案，才是最棒的結果，歡迎大家探索適合自己的解決方案。</p><p><strong>最后碎碎念</strong></p><p>然后相比較版主教程里讓我們用特定版本學習 laravel 的方法，但我還是喜歡遵循官方的文檔說明，盡量用原生方法實現相關效果，且方方面面的都是用最新版本，也算是版主推薦規范化思路下的一個 “叛逆邪道” 吧，自己也需要解決時不時遇到的新版本兼容問題。總之希望這篇文章可以為初學者提供一個新思路，畢竟我們是學習階段，而非生產環境開發，多學一點是一點。</p><p>相比我之前 8.x 的經驗分享，這個屬于新技術的學習與適配，第一次遇到新版本內容我也栽了。自行學習，尋找方案，然后解決問題，學會思路比學會方法更重要，相信后期的 10.x 、100.x 版本也會有更多新內容、新變動，大家一定要掌握解決問題的思路，死板學方法是行不通的，希望各位學習路上的初學者們不要放棄這一優美的框架，要不太可惜了！</p>
