Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Laravel x Vite
Search
Kuro Hsu
August 05, 2021
Technology
0
630
Laravel x Vite
Laravel x Vite / Kuro Hsu
@ PHP 也有 Day #60
Kuro Hsu
August 05, 2021
Tweet
Share
More Decks by Kuro Hsu
See All by Kuro Hsu
[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界
kurotanshi
0
740
[MOPCON 2020] vite: Make web dev fast again
kurotanshi
0
2.4k
[ModernWeb'20] Vue.js :The Bad Parts
kurotanshi
1
130
[MOPCON 2019] Vue.js 3.0 與 Composition API 的變革
kurotanshi
1
1.3k
[JSDC2019] 我有一堆選擇 Vue 開發框架的理由
kurotanshi
1
770
[COSCUP 2019] 前端工程師的養成之路與開源工具
kurotanshi
3
410
初探 Vue 3.0 Function API
kurotanshi
4
3k
VueJS Style Guide 導讀
kurotanshi
6
1.8k
[JSDC2017] 從 VueJS 看前端生態圈的發展變化
kurotanshi
9
2.4k
Other Decks in Technology
See All in Technology
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
wakinchan
0
110
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
11
3.2k
DatabricksのOLTPデータベース『Lakebase』に詳しくなろう!
inoutk
0
100
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
6
240
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
2.5k
ML Pipelineの開発と運用を OpenTelemetryで繋ぐ @ OpenTelemetry Meetup 2025-07
getty708
0
220
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
310
新規事業におけるAIリサーチの活用例
ranxxx
0
140
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
130
激動の時代、新卒エンジニアはAIツールにどう向き合うか。 [LayerX Bet AI Day Countdown LT Day1 ツールの選択]
tak848
0
540
東京海上日動におけるセキュアな開発プロセスの取り組み
miyabit
0
110
Shadow DOM & Security - Exploring the boundary between light and shadow
masatokinugawa
0
660
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
1.9k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
4 Signs Your Business is Dying
shpigford
184
22k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Site-Speed That Sticks
csswizardry
10
720
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
990
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Thoughts on Productivity
jonyablonski
69
4.7k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Transcript
Kuro Hsu @ PHP 也有 Day #60 2021/08/05 Laravel x
Vite
Kuro Hsu Front-End Developer Organizers of Vue.js Taiwan (Vue.tw) https://kuro.tw
[email protected]
@kurotanshi
Vite 是什麼 vite ⚡ 發音 /vit/ ,是法語中「快速」的意思 由 Vue.js 的作者
Evan You 所開發 快速啟動、即時更新的前端 「開發工具」 不只 親兒子 Vue, React 也能用! https://github.com/vitejs/vite
None
實際對比: 以 React Create App 為例 Link
Vite 為什麼這麼快
Vite 為什麼這麼快
以 Bundle 為基礎 (webpack)
以 ES Module 為基礎 (vite、snowpack)
橫向對比
更多相關細節 [MOPCON 2020] vite: Make web dev fast again
今日重點 - Vite ❤️ Laravel
基本需求 Laravel: PHP 7.4+ Vite: Node 12+ 開發用 瀏覽器需支援 ES
Module 若需支援舊版瀏覽器 ,須另外安裝 @vitejs/plugin-legacy
開始與起步 首先要有一個 laravel 專案: 切換到專案目錄,並執行: 1 $ composer create-project laravel/laravel
example-app 1 $ npx apply laravel:vite
手動處理 或者也可以自行處理: 1 # 手動移除 laravel-mix 2 rm webpack.mix.js 3
yarn remove laravel-mix 1 # 安裝必要套件,此步驟不可省略! 2 composer require innocenzi/laravel-vite 3 yarn add vite laravel-vite --dev
設定 編輯 vite.config.ts 檔案 1 // vite.config.ts 2 import {
defineConfig } from 'laravel-vite' 3 import vue from '@vitejs/plugin-vue' 4 5 export default defineConfig() 6 .withPlugin(vue) 7 .merge({ 8 // Your own Vite options 9 })
設定 編輯 package.json 檔案 1 // package.json 2 "scripts": {
3 "dev": "vite", 4 "build": "vite build", 5 "serve": "vite preview" 6 }, 3 "dev": "php artisan serve & vite", // 同時啟動 artisan serve 與 vite 1 // package.json 2 "scripts": { 4 "build": "vite build", 5 "serve": "vite preview" 6 },
這是用來更新靜態檔的 vite 服務 注意,這才是開發用網頁伺服器
Hello Vite!
更多資訊 Laravel Vite ViteJS vite2: Make Web Dev Fast Again
& Again