站長資訊網(wǎng)
在 Laravel 9.x 中優(yōu)雅且輕松的安裝 Bootstrap 框架（vite 篇）
本文給大家分享以下 Laravel 9.x 下的前端工作流的使用心得，之前用 Laravel Mix，現(xiàn)在咱們這次就用用官方推薦的 vite 工具，同時繼續(xù)使用 bootstrap 5，這樣的話既能方便課程學(xué)者即能掌握最新的前端工作流，又能低門檻的調(diào)整自己喜歡的樣式。最重要的是不影響教程的學(xué)習(xí)進(jìn)度和節(jié)奏。【推薦：laravel視頻教程】
寫在前面
開發(fā)環(huán)境：
-
大環(huán)境上是 Windows 10/11 + Homestead，均為最新穩(wěn)定版本
-
兩個平臺都安裝 Node.js
-
Laravel 版本為 9.x（發(fā)文時我用的是最新的 9.38.0） ，其他未提及的按照 9.x 版本的教程來
-
不使用 Laravel Mix，使用官方推薦的新前端打包工具 vite 完成教程里關(guān)于樣式的修改任務(wù)。
我的目的：在 Windows 和 homestead 兩個平臺使用 Node.js 來規(guī)避安裝 Bootstrap 中能踩到的坑，讓苦逼的 Win 用戶學(xué)習(xí)《L01 Laravel 教程 – Web 開發(fā)實(shí)戰(zhàn)入門》的《4.2. 樣式美化》章節(jié)做到 優(yōu)雅且輕松。
不多廢話，線上操作
操作方法
首先默認(rèn)讀者已經(jīng)學(xué)習(xí)到《4.2. 樣式美化》章節(jié)，并且很不幸的被卡住，其次，自己的 Windows 電腦和 Homestread 環(huán)境都可以運(yùn)行 Node.js。Windows 下沒有裝 Node.js 的可通過搜索引擎搜索下載，傻瓜式的安裝流程，不再贅述。
首先我們根據(jù)教程做到下方這一步，但先別執(zhí)行
composer require laravel/ui:3.4.5 --dev
我們改改，這里直接獲取默認(rèn)的最新 laravel/ui 版本，并在 linux 內(nèi)執(zhí)行
composer require laravel/ui // 發(fā)文時最新的版本是 4.0.1，對不住了版主，我自己偷摸的上到最新的版本惹 php artisan ui bootstrap
然后我們到 windows 環(huán)境下開一個終端，比如 powershell，并執(zhí)行
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 中導(dǎo)入 boostrap 5 的 scss
import './bootstrap'; // 以下為新增部分 import '../sass/app.scss' import * as bootstrap from 'bootstrap'
之后再去項目的 blade 模板中，更換原本的 mix () 代碼。這里的話要是根據(jù)教程來，我們只改那個 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>
之后我們后期學(xué)習(xí)中，但凡牽扯到 Mix 的一律按照這個思路處理。
最后，在 windows 終端輸入如下指令
npm run build // 或者 npm run dev
操作結(jié)束，刷新以下瀏覽器就可看到效果。
至于 dev 和 build 的區(qū)分就是：
-
dev 適合開發(fā)的時候隨時調(diào)整，你的修改是實(shí)時生效且自動的，建議開發(fā)的時候一直開個窗口掛后臺就行
-
build 會一步處理完畢并輸出 css 和 js 文件，只會執(zhí)行一次不會自動，適合最后發(fā)布階段。
速度方面，相比較 laravel Mix 前端工作流，vite 會以閃電般的速度給你穩(wěn)健的處理好，放心，vite 的處理速度實(shí)在是太快惹。
項目部署
當(dāng)我們的代碼上傳到遠(yuǎn)端 git 倉庫后，再拉到生產(chǎn)環(huán)境時，vite 使用 npm run build 生成的 css 和 js 文件是不會納入 git 管理的，也就是你在本地 git add -A 是包括不了他倆的，我們需要在本地開發(fā)項目的根目錄找到.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 檢測到。
當(dāng)然，你也完全可以在線上編譯樣式，這個思路你懂就行，舉一反三嘛。
其他小貼士
bootstrap 5 已經(jīng)刪除原本 4 版本的 Jumbotron 組件，所以你看不到對應(yīng)的樣式，正常現(xiàn)象。想改的請發(fā)揮自己的想象，去自己寫一個。
關(guān)于 4.4. 瀏覽器緩存問題 章節(jié)，若你使用 vite 的前端工作流，build 完畢后，會自動給樣式文件加上后綴，所以這一章節(jié)可以不看，使用 vite 的工作模式是不存在這個問題的，跳過繼續(xù)學(xué)習(xí)。
是否發(fā)現(xiàn)本文有些地方你可以提出你自己的方法，這樣最好，我的回答不是最完美的，大家學(xué)習(xí)過程中能提出自己獨(dú)立思考的疑問或者解決方案，才是最棒的結(jié)果，歡迎大家探索適合自己的解決方案。
最后碎碎念
然后相比較版主教程里讓我們用特定版本學(xué)習(xí) laravel 的方法，但我還是喜歡遵循官方的文檔說明，盡量用原生方法實(shí)現(xiàn)相關(guān)效果，且方方面面的都是用最新版本，也算是版主推薦規(guī)范化思路下的一個 “叛逆邪道” 吧，自己也需要解決時不時遇到的新版本兼容問題。總之希望這篇文章可以為初學(xué)者提供一個新思路，畢竟我們是學(xué)習(xí)階段，而非生產(chǎn)環(huán)境開發(fā)，多學(xué)一點(diǎn)是一點(diǎn)。
相比我之前 8.x 的經(jīng)驗分享，這個屬于新技術(shù)的學(xué)習(xí)與適配，第一次遇到新版本內(nèi)容我也栽了。自行學(xué)習(xí)，尋找方案，然后解決問題，學(xué)會思路比學(xué)會方法更重要，相信后期的 10.x 、100.x 版本也會有
