在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 放的位置
@yield('title', 'Weibo App') - Laravel 入门教程
@vite(['resources/js/app.js']) <--- here!
@yield('content')
登入後複製
之後我們後製學習中，但凡牽扯到Mix 的一律按照這個思路處理。
最後，在 windows 終端機輸入如下指令
npm run build
// 或者
npm run dev
登入後複製
作業結束，刷新以下瀏覽器就可看到效果。
至於dev 和build 的區分就是：
速度方面，相比較 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 版本也會有更多新內容、新變動，大家一定要掌握解決問題的思路，死板學方法是行不通的，希望各位學習路上的初學者們不要放棄這優美的框架，要不太可惜了！
以上是詳解如何在Laravel9.x中快速安裝Bootstrap的詳細內容。更多資訊請關注PHP中文網其他相關文章！
