Vite Là Gì? Hướng Dẫn Dễ Hiểu Cho Người Xây Dựng Ứng Dụng

Vite (phát âm là “veet”, nghĩa là “nhanh” trong tiếng Pháp) là công cụ build cho website và ứng dụng web. Trong lúc bạn đang xây dựng, nó chạy một máy chủ phát triển hiển thị thay đổi của bạn trong trình duyệt gần như tức thì. Khi bạn sẵn sàng ra mắt, nó đóng gói mã thành các tệp nhỏ, đã tối ưu mà bất kỳ máy chủ lưu trữ web nào cũng phục vụ được. Vite miễn phí, mã nguồn mở, và là công cụ mặc định đứng sau nhiều dự án React, Vue và Svelte.

Vì sao Vite quan trọng khi bạn xây dựng bằng AI

Có thể bạn không bao giờ gõ lệnh Vite, nhưng nếu ứng dụng của bạn được xây bằng trình xây dựng ứng dụng AI, rất có thể Vite đang chạy nó. Mythex khởi tạo các dự án mới trên Vite + React + TypeScript + Tailwind trừ khi bạn yêu cầu khác (cách chọn công nghệ).

Hiểu Vite làm gì sẽ giúp bạn:

• Hiểu Preview. Bản xem trước trực tiếp, cập nhật khi AI chỉnh sửa tệp, thường là một máy chủ phát triển Vite.
• Hiểu việc triển khai. Một ứng dụng Vite trở thành một thư mục các tệp tĩnh — HTML, JavaScript, CSS và ảnh — rẻ và đơn giản để lưu trữ.
• Đọc thông báo lỗi. Khi bản xem trước hiện lớp lỗi màu đỏ hoặc một trang trắng, thường là Vite đang báo rằng một tệp không biên dịch được.
• Biết giới hạn của nó. Vite build phần frontend. Nếu ứng dụng cần backend — cơ sở dữ liệu, khóa API bí mật, thanh toán — thì phần đó chạy ở nơi khác. Xem frontend và backend.

Một ví dụ đời thường

Hãy nghĩ đến một bếp nhà hàng.

• Trong giờ chuẩn bị (phát triển), đầu bếp nếm và điều chỉnh từng món khi làm. Đổi gia vị, nếm lại ngay giây sau. Đó là máy chủ phát triển của Vite: bạn thay đổi một tệp, trang cập nhật ngay, thường mà không mất nội dung bạn đã gõ trong form.
• Cho đơn tiệc (sản xuất), mọi thứ được nấu, chia phần, đóng gói và dán nhãn để di chuyển tốt và phục vụ được ở bất cứ đâu. Đó là vite build: mã của bạn được gom lại, thu nhỏ và gắn dấu vân tay thành các tệp sẵn sàng cho mọi máy chủ.

Cùng công thức, hai cách xử lý rất khác nhau — và Vite làm được cả hai.

Vite thực sự làm gì

Một ứng dụng web hiện đại gồm nhiều tệp: component, kiểu dáng, ảnh và các thư viện bên thứ ba. Trình duyệt không thể dùng trực tiếp tất cả những thứ đó như đã viết. TypeScript phải chuyển thành JavaScript, JSX của React phải được biến đổi, và các class Tailwind phải được chuyển thành CSS.

Vite xử lý việc này theo hai chế độ:

Các công cụ cũ hơn gom toàn bộ ứng dụng trước khi hiển thị bất cứ thứ gì, nên khởi động và cập nhật một dự án lớn có thể mất rất lâu. Mẹo của Vite là bỏ qua bước đó khi phát triển và để trình duyệt tải tệp khi cần. Với production, nó vẫn gom mã — từ Vite 8, với bộ gom mã tên Rolldown — vì nhiều tệp nhỏ thì chậm đối với người truy cập hơn vài tệp đã tối ưu.

Ví dụ minh họa: bên trong một dự án Vite

Đây là cấu trúc khái quát của một ứng dụng React + Vite nhỏ:

my-app/
  index.html          ← trang HTML duy nhất mà ứng dụng khởi đầu từ đó
  package.json        ← danh sách thư viện và script (dev, build)
  vite.config.ts      ← cài đặt và plugin của Vite
  src/
    main.tsx          ← khởi động React và gắn nó vào index.html
    App.tsx           ← component cấp cao nhất của ứng dụng
    index.css         ← kiểu dáng, ví dụ @import "tailwindcss";
  public/             ← các tệp được sao chép nguyên trạng (favicon, robots.txt)

Và các script trong package.json:

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

Bây giờ hãy theo dõi một thay đổi đơn lẻ:

1. Bạn yêu cầu AI “đổi tiêu đề thành màu xanh”.
2. Nó sửa một class trong App.tsx.
3. Vite nhận ra tệp đã thay đổi, biến đổi đúng tệp đó và đẩy cập nhật tới trình duyệt.
4. Tiêu đề chuyển sang màu xanh trong bản xem trước, thường trong vòng một giây.

Khi bạn xuất bản, vite build tạo ra thứ gì đó như dist/index.html cùng dist/assets/index-a1b2c3.js. Phần trông ngẫu nhiên trong tên tệp đó thay đổi mỗi khi nội dung thay đổi, nên trình duyệt và CDN có thể lưu bộ nhớ đệm các tệp trong thời gian dài mà không phục vụ mã cũ.

Biến môi trường trong Vite

Vite chỉ đưa các biến có tên bắt đầu bằng VITE_ vào mã phía trình duyệt, ví dụ VITE_PUBLIC_MAP_ID. Đó là biện pháp an toàn: bất cứ thứ gì trong mã trình duyệt đều có thể bị người truy cập xem được, nên khóa bí mật tuyệt đối không được có tiền tố đó và phải được giữ ở backend. Xem biến môi trường và bí mật.

Các thuật ngữ chính

Những hiểu lầm thường gặp

• “Vite là một framework.” Nó là công cụ build. React, Vue hoặc Svelte mới là framework; Vite chạy và đóng gói nó.
• “Một ứng dụng Vite có sẵn backend.” Ứng dụng Vite tiêu chuẩn chỉ có frontend. Cơ sở dữ liệu, đăng nhập và khóa bí mật cần một máy chủ hoặc API đi kèm.
• “Máy chủ phát triển có thể đưa lên mạng.” Nó không được thiết kế cho lưu lượng thật. Luôn triển khai đầu ra của bản build production.
• “Mọi thứ trong .env đều là bí mật.” Trong một ứng dụng Vite, các biến VITE_ được nhúng cứng vào các tệp mà mọi người truy cập đều tải về.
• “Tải lại trang trả về lỗi 404 nghĩa là ứng dụng hỏng.” Trong một ứng dụng một trang, máy chủ phải chuyển mọi đường dẫn về index.html. Đó là cài đặt lưu trữ — xem cách sửa lỗi 404 sau khi triển khai.

Nên yêu cầu gì với trình xây dựng AI của bạn

• “Ứng dụng này chỉ có Vite (frontend), hay cũng có backend? Mỗi phần chạy ở đâu?”
• “Chạy bản build production và sửa mọi lỗi hoặc cảnh báo trước khi tôi xuất bản.”
• “Kiểm tra không có khóa bí mật nào nằm trong biến VITE_ hoặc bất kỳ đâu trong mã frontend.”
• “Bản xem trước hiện trang trắng — kiểm tra lỗi trong console của Vite và trình duyệt rồi sửa nguyên nhân.” Xem cách sửa trang trắng.
• “Đảm bảo việc tải lại bất kỳ URL trang nào hoạt động sau khi xuất bản, không chỉ trang chủ.”

Vite trong Mythex

Mọi dự án Mythex mới đều khởi đầu trên Vite, trừ khi bạn yêu cầu Next.js, HTML tĩnh hoặc một backend khác. Bản xem trước trực tiếp trong sandbox riêng của bạn cập nhật khi agent chỉnh sửa tệp, và Publish sẽ build ứng dụng và triển khai — bạn không phải tự thiết lập hosting. Nếu sau này bạn cần API hoặc cơ sở dữ liệu, hãy yêu cầu trong chat và Mythex có thể thêm một dịch vụ backend đi cùng frontend Vite (ứng dụng nhiều dịch vụ).

Câu hỏi thường gặp