📘 VITE TRONG LARAVEL & ỨNG DỤNG CHO PHP / CODEIGNITER 3.x

📚 Mục lục

1. ⚡ Vite là gì?

2. 🧩 Tại sao Laravel sử dụng Vite?

3. 📦 Vite đứng ở đâu trong một dự án Laravel?

4. 🗂️ Cấu trúc thư mục khi sử dụng Vite

5. 📄 File vite.config.js

6. 📦 File package.json

7. 🎨 Quản lý CSS với Vite

8. ⚙️ Quản lý JavaScript với Vite

9. 🔗 @vite() trong Blade

10. 🏗️ Development và Production Build

11. 🔥 Vite Dev Server và Hot Module Replacement

12. 📦 Vite xử lý Module JavaScript như thế nào?

13. 🖼️ Vite xử lý hình ảnh, Font và Asset

14. 🔐 Biến môi trường .env trong Vite

15. 🛠️ Cấu hình Vite cho Laravel

16. 🧱 Sử dụng Vite với PHP thuần

17. 🚀 Sử dụng Vite với CodeIgniter 3.x

18. 🔌 Kết nối Vite với View của CodeIgniter

19. 📁 Xây dựng cấu trúc Frontend riêng cho CI3

20. 🏭 Build Vite để Deploy lên Hosting

21. ⚠️ Những lỗi thường gặp khi dùng Vite

22. 🧠 Laravel Mix khác Vite như thế nào?

23. 🎯 Khi nào nên dùng Vite?

24. 🏆 Kiến trúc Frontend hiện đại cho dự án PHP

---

1. ⚡ Vite là gì?

Vite là một công cụ dành cho frontend, có nhiệm vụ chính là:

Source Code
    ↓
Vite
    ↓
Development Server
    ↓
Browser

và khi đưa website lên production:

CSS / JS / Images
        ↓
      Vite
        ↓
     Build
        ↓
dist / build assets

Vite không phải PHP framework.

Nó cũng không thay thế Laravel, CodeIgniter hay PHP.

Có thể hiểu đơn giản:

Laravel / CodeIgniter / PHP
        │
        │ Backend
        ▼
     PHP Server
        │
        │ HTML
        ▼
     Browser
        ▲
        │ CSS / JavaScript
        │
       Vite

Vite phụ trách phần frontend asset.

---

2. 🧩 Tại sao Laravel sử dụng Vite?

Một dự án Laravel hiện đại thường có rất nhiều frontend asset:

resources/
├── css/
│   └── app.css
│
└── js/
    └── app.js

Nếu chỉ có một file CSS và một file JS nhỏ thì không vấn đề.

Nhưng dự án lớn có thể có:

JavaScript
├── app.js
├── admin.js
├── dashboard.js
├── modal.js
├── editor.js
└── components/
    ├── table.js
    ├── chart.js
    └── notification.js

Vite giúp quản lý toàn bộ hệ thống này.

Đặc biệt nó hỗ trợ:

• ES Modules

• CSS

• JavaScript

• TypeScript

• asset processing

• development server

• HMR

• production build

• bundling

• tối ưu frontend

---

3. 📦 Vite đứng ở đâu trong Laravel?

Một dự án Laravel có thể hình dung:

Laravel
│
├── PHP
│   ├── Route
│   ├── Controller
│   ├── Model
│   └── Middleware
│
├── Blade
│   └── HTML
│
└── Vite
    ├── CSS
    ├── JavaScript
    ├── Images
    └── Frontend modules

Hai phần này có nhiệm vụ khác nhau.

Laravel

Request
   ↓
Route
   ↓
Controller
   ↓
Model
   ↓
Database
   ↓
Blade
   ↓
HTML

Vite

CSS
JS
Images
Modules
   ↓
 Vite
   ↓
Browser

Do đó:

Laravel xử lý application. Vite xử lý frontend assets.

---

4. 🗂️ Cấu trúc thư mục

Ví dụ Laravel:

my-project/
│
├── app/
├── routes/
├── resources/
│   ├── css/
│   │   └── app.css
│   │
│   └── js/
│       └── app.js
│
├── public/
│
├── package.json
├── vite.config.js
└── .env

Thông thường source frontend nằm trong:

resources/

Trong khi file sau build sẽ được Vite đưa vào vùng public/build.

---

5. 📄 vite.config.js

Ví dụ cấu hình cơ bản của Laravel:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

Điểm quan trọng là:

input

xác định những file frontend mà Vite cần xử lý.

Ví dụ:

input: [
    'resources/css/app.css',
    'resources/js/app.js',
    'resources/css/admin.css',
    'resources/js/admin.js',
]

---

6. 📦 package.json

Vite hoạt động thông qua Node.js và npm.

Ví dụ:

{
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    }
}

Chạy:

npm run dev

để phát triển.

Còn:

npm run build

để build production.

---

7. 🎨 CSS với Vite

Ví dụ:

resources/css/app.css

body {
    font-family: Arial, sans-serif;
}

.card {
    border-radius: 10px;
}

Trong JavaScript:

import '../css/app.css';

Vite sẽ hiểu dependency này.

app.js
   │
   └── app.css

Đây là một điểm rất quan trọng của Vite:

Frontend asset có thể được quản lý như module.

---

8. ⚙️ JavaScript với Vite

Ví dụ:

resources/js/app.js

import './bootstrap';

console.log('Laravel + Vite');

Có thể chia module:

resources/js/
├── app.js
├── modal.js
├── table.js
└── chart.js

Sau đó:

import './modal';
import './table';
import './chart';

Thay vì nhét toàn bộ JavaScript vào một file khổng lồ.

---

9. 🔗 @vite() trong Blade

Trong Blade:

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

Laravel sẽ kết nối Blade với Vite.

Ở development:

Blade
 ↓
Vite Dev Server
 ↓
CSS / JS

Ở production:

Blade
 ↓
Manifest
 ↓
Built Assets

Đây chính là cầu nối giữa Laravel và Vite.

---

10. 🏗️ Development và Production

Đây là phần cần hiểu thật kỹ.

Development

Chạy:

npm run dev

Vite mở development server.

Ví dụ:

Browser
   ↓
Laravel
   ↓
Vite
   ↓
resources/js/app.js

---

Production

Chạy:

npm run build

Vite sẽ xử lý:

resources/
   ↓
Vite
   ↓
build
   ↓
optimized CSS / JS

Ví dụ:

public/build/
├── assets/
│   ├── app-ABC123.js
│   └── app-XYZ456.css
└── manifest.json

Tên file được hash để hỗ trợ cache.

---

11. 🔥 Hot Module Replacement

Một trong những tính năng rất hay của Vite là HMR.

Bạn sửa:

console.log('Hello');

thành:

console.log('Hello Vite');

Vite có thể cập nhật module trên browser mà không cần refresh toàn bộ trang theo cách truyền thống.

Quy trình:

Edit JS
  ↓
Vite phát hiện thay đổi
  ↓
HMR
  ↓
Browser cập nhật

Đây là lý do Vite tạo cảm giác phát triển frontend rất nhanh.

---

12. 📦 Module JavaScript

Không dùng Vite, nhiều dự án PHP cũ thường có:

<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/app.js"></script>
<script src="/js/admin.js"></script>

Với Vite:

import './bootstrap';
import './admin';

Vite xây dựng dependency graph:

app.js
 │
 ├── bootstrap.js
 │
 ├── modal.js
 │
 └── admin.js

Sau đó build thành asset phù hợp.

---

13. 🖼️ Images, Font và Asset

Ví dụ:

resources/
├── js/
├── css/
└── images/
    └── logo.png

CSS:

.logo {
    background-image: url('../images/logo.png');
}

Vite có thể xử lý asset dependency này trong quá trình build.

---

14. 🔐 .env và Vite

Vite cũng hỗ trợ biến môi trường.

Ví dụ:

VITE_APP_NAME="My Laravel App"

JavaScript:

console.log(import.meta.env.VITE_APP_NAME);

Có một nguyên tắc quan trọng:

Những biến bắt đầu bằng VITE_ có thể được expose ra frontend.

Vì vậy không được đưa secret/private key vào VITE_*.

---

15. 🛠️ Vite trong Laravel

Laravel cung cấp integration khá chặt với Vite.

Có thể xem kiến trúc:

Laravel
   │
   ├── Blade
   │
   ├── laravel-vite-plugin
   │
   └── Vite
          │
          ├── CSS
          ├── JS
          ├── Images
          └── Build

Nhưng điều thú vị là:

Vite không hề phụ thuộc Laravel.

Đây chính là chỗ mở rộng kiến thức sang PHP thuần và CI3.

---

16. 🧱 Sử dụng Vite với PHP thuần

Giả sử dự án:

my-php/
│
├── index.php
├── login.php
│
├── resources/
│   ├── css/
│   │   └── app.css
│   │
│   └── js/
│       └── app.js
│
├── public/
│
├── package.json
└── vite.config.js

Không cần Laravel.

Vite chỉ cần Node.js.

Ví dụ:

npm install vite

package.json:

{
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    }
}

Sau đó:

npm run dev

PHP vẫn chạy bằng Apache/Nginx/Laragon.

Hai server có thể hoạt động song song:

PHP
127.0.0.1:8000

Vite
localhost:5173

---

17. 🚀 Vite với CodeIgniter 3.x

Đây mới là phần rất đáng học.

CodeIgniter 3 vốn được xây dựng trong thời kỳ frontend tooling chưa phổ biến như hiện nay.

Một dự án CI3 truyền thống thường có:

application/
system/
public/
assets/

và:

<link rel="stylesheet" href="<?= base_url('assets/css/app.css') ?>">
<script src="<?= base_url('assets/js/app.js') ?>"></script>

Không có nghĩa là CI3 không dùng được Vite.

Hoàn toàn có thể.

---

18. 🔌 Kiến trúc CI3 + Vite

Có thể thiết kế:

CI3
│
├── application/
│   ├── controllers/
│   ├── models/
│   └── views/
│
├── system/
│
├── resources/
│   ├── css/
│   └── js/
│
├── public/
│
├── package.json
└── vite.config.js

Sau khi build:

resources/
      ↓
     Vite
      ↓
public/build/

CI3 chỉ cần load file build.

Ví dụ:

<script type="module"
        src="<?= base_url('build/assets/app.js') ?>">
</script>

---

19. 📁 Một cấu trúc CI3 hiện đại

Nếu mình xây một project CI3 mới theo hướng hiện đại, có thể tổ chức:

my-ci3/
│
├── application/
│   ├── controllers/
│   ├── models/
│   ├── views/
│   │   ├── layouts/
│   │   ├── admin/
│   │   └── frontend/
│   │
│   └── config/
│
├── resources/
│   ├── css/
│   │   ├── app.css
│   │   └── admin.css
│   │
│   ├── js/
│   │   ├── app.js
│   │   └── admin.js
│   │
│   └── images/
│
├── public/
│   └── build/
│
├── package.json
└── vite.config.js

Backend:

CodeIgniter 3

Frontend:

Vite

Hai hệ thống độc lập nhưng phối hợp với nhau.

---

20. 🏭 Build CI3 để Deploy

Ở máy development:

npm run dev

Khi deploy:

npm run build

Sau đó server PHP không cần chạy Vite.

Chỉ cần các file đã build:

public/build/

Đây là điểm rất quan trọng.

Production có thể chạy:

Apache/Nginx
      │
      ├── PHP
      │     ↓
      │    CI3
      │
      └── Static Assets
            ↓
           Vite build

Vite không phải backend server production của CI3.

---

21. ⚠️ Những lỗi thường gặp

Lỗi 1 — Nghĩ Vite là PHP framework

Sai:

Vite = Framework PHP

Đúng:

Vite = Frontend build tool / development server

---

Lỗi 2 — Đưa API key vào VITE_

Không nên:

VITE_SECRET_KEY=abc123

vì biến này có thể xuất hiện phía frontend.

---

Lỗi 3 — Production vẫn chạy npm run dev

Không cần.

Production nên:

npm run build

sau đó server phục vụ file build.

---

Lỗi 4 — CI3 không có @vite()

Đúng.

@vite() là integration của Laravel.

Với CI3 bạn phải tự xây cách load asset:

<script type="module"
        src="<?= base_url('build/assets/app.js') ?>">
</script>

---

22. 🧠 Laravel Mix và Vite

Có thể hình dung:

Laravel cũ
     ↓
Laravel Mix
     ↓
Webpack

Laravel hiện đại:

Laravel
   ↓
Vite
   ↓
esbuild / Rollup ecosystem

Vite có workflow frontend hiện đại hơn và development server nhanh hơn.

---

23. 🎯 Khi nào nên dùng Vite?

Không nhất thiết dự án PHP nào cũng cần Vite.

Website cực đơn giản

PHP
├── HTML
├── CSS
└── vài dòng JS

Có thể không cần.

Dashboard lớn

PHP
+
Bootstrap
+
Chart.js
+
DataTables
+
Modules JS
+
SCSS

Vite bắt đầu rất hữu ích.

SPA / frontend phức tạp

Laravel / CI3 / PHP API
          +
React / Vue
          +
Vite

thì Vite càng phù hợp.

---

24. 🏆 Kiến trúc PHP hiện đại

Điểm quan trọng nhất của bài này không phải là:

“Laravel dùng Vite như thế nào?”

mà là hiểu rằng Vite có thể đứng độc lập với PHP framework.

Ta có thể xây:

                 FRONTEND
                    │
                  Vite
                    │
        ┌───────────┼───────────┐
        │           │           │
       CSS         JS        Images
        │           │
        └───────────┼───────────┘
                    │
                  Build
                    │
                    ▼
              Browser
                    ▲
                    │
                  HTML
                    │
        ┌───────────┼───────────┐
        │           │           │
     Laravel       CI3       PHP thuần
        │           │           │
        └───────────┼───────────┘
                    │
                 Database

Đây là tư duy rất đáng học:

Vite không thuộc riêng Laravel. Laravel chỉ cung cấp một integration thuận tiện với Vite.

Vì vậy sau khi học Vite trong Laravel, ta hoàn toàn có thể lấy kiến thức đó áp dụng cho CodeIgniter 3.x, PHP thuần, Symfony hoặc bất kỳ backend PHP nào.