Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Laravel x Vite

Kuro Hsu
August 05, 2021

Laravel x Vite

Laravel x Vite / Kuro Hsu
@ PHP 也有 Day #60

Kuro Hsu

August 05, 2021
Tweet

More Decks by Kuro Hsu

Other Decks in Technology

Transcript

  1. Vite 是什麼 vite ⚡ 發音 /vit/ ,是法語中「快速」的意思 由 Vue.js 的作者

    Evan You 所開發 快速啟動、即時更新的前端 「開發工具」 不只 親兒子 Vue, React 也能用! https://github.com/vitejs/vite
  2. 基本需求 Laravel: PHP 7.4+ Vite: Node 12+ 開發用 瀏覽器需支援 ES

    Module 若需支援舊版瀏覽器 ,須另外安裝 @vitejs/plugin-legacy
  3. 手動處理 或者也可以自行處理: 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
  4. 設定 編輯 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 })
  5. 設定 編輯 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 },