溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么在Laravel9.x中快速安裝Bootstrap”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“怎么在Laravel9.x中快速安裝Bootstrap”文章能幫助大家解決問題。
開發環境：
大環境上是 Windows 10/11 + Homestead，均為最新穩定版本
兩個平臺都安裝 Node.js
Laravel 版本為 9.x（發文時我用的是最新的 9.38.0） ，其他未提及的按照 9.x 版本的教程來
不使用 Laravel Mix，使用官方推薦的新前端打包工具 vite 完成教程里關于樣式的修改任務。
操作方法
首先我們根據教程做到下方這一步，但先別執行
我們改改，這里直接獲取默認的最新 laravel/ui 版本，并在 linux 內執行 然后我們到 windows 環境下開一個終端，比如 powershell，并執行 然后回到你的編輯器，找到項目根目錄下剛生成的 vite.coffig.js 我們修改成如下的效果 然后在 app.js 中導入 boostrap 5 的 scss 之后再去項目的 blade 模板中，更換原本的 mix () 代碼。這里的話要是根據教程來，我們只改那個 default.blade.php 文件即可，即將其中的這兩行代碼 全部換成 @vite 代碼 下面是我在 default.blade.php 放的位置composer require laravel/ui:3.4.5 --dev
composer require laravel/ui // 發文時最新的版本是 4.0.1，對不住了版主，我自己偷摸的上到最新的版本惹
php artisan ui bootstrap
npm config set registry=https://registry.npm.taobao.org
npm i
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'),
}
},
});import './bootstrap';
// 以下為新增部分
import '../sass/app.scss'
import * as bootstrap from 'bootstrap'
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}"></script>@vite(['resources/js/app.js'])
<!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>
最后，在 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
關于“怎么在Laravel9.x中快速安裝Bootstrap”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
