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

在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(&#39;css/app.css&#39;) }}">
<script src="{{ mix(&#39;js/app.js&#39;) }}"></script>

全部換成@vite 程式碼

@vite(['resources/js/app.js'])

下面是我在default.blade.php 放的位置

    
    @vite([&#39;resources/js/app.js&#39;])   <--- here!


    

        

            Weibo App
            

                
帮助
                
登录
            
        
    
    

        @yield('content')
    

之後我們後製學習中，但凡牽扯到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的詳細內容。更多資訊請關注PHP中文網其他相關文章！