Chào mừng đến với Cafedev! Trong thời đại phát triển công nghệ ngày nay, việc sử dụng biến môi trường (.env) đã trở thành một thực tiễn phổ biến trong quá trình phát triển ứng dụng. Cùng với sự xuất hiện của Vue.js và Vite, việc sử dụng biến môi trường trở nên ngày càng quan trọng. Trong bài viết này, chúng ta sẽ khám phá cách sử dụng biến môi trường trong Vue.js và Vite để làm cho ứng dụng của bạn trở nên linh hoạt và bảo mật hơn. Hãy cùng khám phá!
Gần đây, quy tắc phát triển tốt nhất là đặt các điểm cuối API, thông tin đăng nhập, bí mật, v.v., vào các biến môi trường để làm cho thông tin nhạy cảm an toàn hơn. Hôm trước, khi tôi đang làm việc với một dự án mới sử dụng Vite, tôi phải tìm hiểu cách làm lại sau khi đã sử dụng Vue CLI. Đây là những gì tôi tìm thấy.
Trước tiên, một mình chúng không an toàn. Các biến môi trường bị tiết lộ cho máy khách nếu chúng được sử dụng trong phía frontend của một trang web hoặc ứng dụng. Chúng hiển thị trong bản bundle xây dựng và mặc dù có thể là một công việc khó khăn để kiểm tra, chúng vẫn hiện diện. Bạn cũng có thể thấy các tên miền được sử dụng trong các cuộc gọi API, cũng như các tài nguyên khác, vì vậy ý tưởng rằng các biến môi trường ngăn chặn dữ liệu nhạy cảm khỏi bị nhìn thấy không chính xác (đó là những gì tôi nghĩ ban đầu). Điều mà .env làm – miễn là bạn thêm nó vào tệp .gitignore – là giữ các bí mật ứng dụng hoặc các điểm cuối nhạy cảm ra khỏi kho lưu trữ github để chúng không công khai. Một lý do khác hữu ích là để giảm thiểu sự trùng lặp trong mã của bạn với các biến/giá trị mà bạn sẽ sử dụng nhiều. Đặt chúng trong một biến toàn cục giúp tái sử dụng dễ dàng hơn.
Tiếp tục đọc để xem cách sử dụng chúng trong một ứng dụng Vue với Vite.
Nội dung chính
1. .env
Hầu hết các bài viết về chủ đề này sẽ nói điều này:
Các biến môi trường được sử dụng để lưu trữ các bí mật ứng dụng và dữ liệu cấu hình, được lấy ra bởi ứng dụng của bạn khi cần thiết.”
Họ sẽ tiếp tục nói rằng việc đặt bất kỳ dữ liệu trang web hoặc ứng dụng nhạy cảm nào vào các biến môi trường là một thực hành tốt để đảm bảo an toàn. Nhưng làm thế nào? Và tại sao?
Nếu các biến môi trường được sử dụng trên phía frontend, tức là một điểm cuối API được sử dụng trong một yêu cầu GET để truy xuất một loại dữ liệu nào đó, biến đó vẫn sẽ được nhìn thấy trong trình duyệt của máy khách. Nó có thể chỉ hiển thị trong bản bundle ứng dụng (nếu bạn đang sử dụng một công cụ xây dựng), nhưng nó vẫn ở đó nếu có ai đó quan tâm đến việc tìm thấy nó. Tất cả những gì nó làm là đổi biến một cách động vào bất cứ nơi nào nó được sử dụng vào thời gian chạy – vẫn trên máy khách.
Vì vậy, trong khi có các ứng dụng khác cho EVs, như thiết lập các loại dữ liệu khác nhau hoặc thông tin xác thực cho các môi trường phát triển khác nhau (cục bộ, dev, sản xuất), ứng dụng chính để sử dụng các biến môi trường – như đã nói ở trên – đặc biệt là trên phía frontend, là để giữ chúng ra khỏi kho lưu trữ của bạn cho một mức độ bảo mật và tạo ra các biến toàn cục có thể tái sử dụng giữ mã của bạn DRY.
2. Làm thế nào để làm điều này trong Vue và Vite
Gần đây, tôi đã tạo một trang web sử dụng một hệ thống quản lý nội dung không giao diện để cung cấp cho khách hàng giao diện GUI dễ sử dụng để họ có thể thay đổi, thêm và cập nhật văn bản và hình ảnh một cách tự động. Đây là một nhiệm vụ phổ biến của nhà phát triển và trở nên phổ biến hơn với sự ra đời của các hệ thống quản lý nội dung không giao diện.
Hệ thống quản lý nội dung cụ thể này tiết lộ tất cả nội dung trang web dưới dạng một API ở định dạng JSON. Vì vậy, phía frontend Vue điểm cuối và hiển thị động tất cả dữ liệu. Để tạo ra và tiêu thụ một biến môi trường trong Vue và Vite, điều này khá đơn giản:
3. Tạo một tệp .env
Trong THƯ MỤC GỐC của dự án, tạo một tệp mới có tên là .env
* Điều quan trọng cần lưu ý là không đặt tệp trong thư mục src hoặc bất kỳ vị trí nào khác.
* Một lỗi phổ biến là gặp lỗi với các tệp .env và biến không được hiển thị – điều này có thể được giải quyết chủ yếu bằng cách đảm bảo rằng tệp .env của bạn được đặt trong thư mục gốc.
3. Tạo một biến và thêm dữ liệu/giá trị
Trong Vite , các biến môi trường cần được tiền tố bằng VITE_ như VITE_*tên-biến
VITE_API_URL="https://yourapiendpoint.com"Đối với Vue CLI, các biến cần được tiền tố bằng VUE_APP
VUE_APP_API_URL="https://yourapiendpoint.com"4. Sử dụng/truy cập biến trong toàn bộ ứng dụng của bạn
Để sử dụng các biến môi trường trong toàn bộ trang web hoặc ứng dụng của bạn trong Vite, bạn sử dụng import.meta.env trước tên biến của bạn: ví dụ
import.meta.env.VITE_API_URLVà để truy xuất dữ liệu API ví dụ (sử dụng fetch() ), bạn có thể gọi biến môi trường của mình như sau:
fetch(import.meta.env.VITE_API_ENDPOINT)
.then(response => response.json())
.then((data) => {
console.log(data)
})Để tránh một số lỗi phổ biến khi sử dụng EVs:
* Hãy chắc chắn khởi động lại máy chủ dev của bạn sau khi thay đổi bất kỳ điều gì trong tệp .env.
* Đặt tệp .env của bạn trong THƯ MỤC GỐC của dự án, không phải trong src
* Tiền tố Vite EVs của bạn bằng VITE_
* Xem here để biết thêm về cách khắc phục sự cố.
Hãy đảm bảo thêm tệp .env của bạn vào .gitignore để các biến của bạn không được lưu trữ trong kho lưu trữ của bạn.
Và đó là tất cả.
Để biết thêm về biến môi trường, đây là một bài viết cơ bản, đây là một luồng thảo luận tốt, tìm thêm một cái nữa đây về lý do bạn không nên sử dụng chúng.
Cảm ơn bạn đã theo dõi bài viết của chúng tôi trên Cafedev về cách sử dụng biến môi trường (.env) trong Vue.js và Vite. Hy vọng rằng thông tin trong bài viết sẽ giúp bạn hiểu rõ hơn về cách thức áp dụng biến môi trường vào dự án của mình, tạo ra các ứng dụng linh hoạt và bảo mật hơn. Đừng quên tiếp tục theo dõi chúng tôi trên Cafedev để cập nhật thêm nhiều thông tin hữu ích khác về công nghệ và lập trình!
Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
