詳解如何在Laravel9.x中快速安裝Bootstrap

在 Laravel 9.x 中優雅且輕鬆的安裝 Bootstrap 框架（vite 篇）

本文給大家分享以下 Laravel 9.x 下的前端工作流的使用心得，之前用 Laravel Mix，現在咱們這次就用用官方推薦的 vite 工具，同時繼續使用 bootstrap 5，這樣的話既能方便課程學者即能掌握最新的前端工作流，又能低門檻的調整自己喜歡的樣式。最重要的是不影響教學的學習進度和節奏。【推薦：】

寫在前面

開發環境：

大環境上是 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 版本也會有更多新內容、新變動，大家一定要掌握解決問題的思路，死板學方法是行不通的，希望各位學習路上的初學者們不要放棄這一優美的框架，要不太可惜了！

以上就是詳解如何在Laravel9.x中快速安裝Bootstrap的詳細內容，更多請關注TW511.COM其它相關文章！