Làm việc với các biến môi trường trong Vue.js
Trong bài đăng này, ta sẽ tìm hiểu cách làm việc với các cấu hình khác nhau giữa chế độ phát triển và production cho các dự án Vue.js sử dụng mẫu webpack của CLI.
Trong một ứng dụng web, ta rất có thể phải truy cập server API backend thông qua một URL. URL này có thể giống như http://localhost:8080/api khi đang phát triển và https://site.com/api trong production khi dự án được triển khai. Các biến môi trường cho phép ta dễ dàng thay đổi URL này tự động, theo trạng thái hiện tại của dự án.
Một cách dễ dàng để sử dụng các biến môi trường với Vue và mẫu webpack là thông qua các file có phần mở rộng .env . Các file này chịu trách nhiệm lưu trữ thông tin dành riêng cho môi trường (phát triển, thử nghiệm, production ,…)
Phần lớn bài đăng này áp dụng cho các ứng dụng sử dụng v2.x của Vue CLI, nhưng các biến môi trường cũng dễ quản lý trong Vue CLI v3 .
Sử dụng file .env trong Vue
Cách đơn giản nhất để sử dụng file .env trong Vue là tạo một ứng dụng đã hỗ trợ file môi trường. Hãy sử dụng vue-cli và mẫu webpack cho điều đó.
Với Node 8 trở lên được cài đặt, hãy chạy như sau, trong đó ứng dụng của tôi là tên ứng dụng của bạn:
$ npx vue-cli init webpack my-app Lệnh này sẽ tạo một ứng dụng với một số file đã sẵn sàng để sử dụng. Trong bài đăng này, ta chỉ tập trung vào cấu hình môi trường, có thể được truy cập trong folder cấu hình :
Có hai file trong folder cấu hình: dev.env.js và prod.env.js , và bạn cũng sẽ có file test.env.js nếu bạn đã cấu hình các bài kiểm tra trong khi bắt đầu dự án. Các file này được sử dụng trong chế độ phát triển và production , hay nói cách khác, khi bạn đang chạy ứng dụng thông qua lệnh dev.env.js npm run dev , file dev.env.js được sử dụng và khi bạn biên dịch dự án cho production với lệnh npm run build lệnh npm run build , file prod.env.js được sử dụng thay thế.
Hãy thay đổi file phát triển thành:
'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', ROOT_API: '"http://localhost/api"' }) Tệp môi trường phát triển của ta có một biến bổ sung được gọi là ROOT_API , với giá trị http://localhost/api .
Bây giờ hãy thay đổi file production thành:
'use strict' module.exports = { NODE_ENV: '"production"', ROOT_API: '"http://www.site.com/api"' } Ở đây ta có cùng một biến ROOT_API , nhưng có một giá trị khác, chỉ nên được sử dụng trong chế độ production . Lưu ý cách các biến chuỗi cần dấu nháy kép bên trong dấu nháy đơn.
Sử dụng file môi trường trong mã của bạn
Sau khi tạo biến ROOT_API , ta có thể sử dụng nó ở bất kỳ đâu trong Vue thông qua đối tượng process.env global :
process.env.ROOT_API Ví dụ: mở file src/components/HelloWorld.vue và trong <script> thêm thông tin sau:
mounted() { console.log(process.env.ROOT_API) } Sau khi chạy npm run dev , bạn sẽ thấy thông tin console.log trong các công cụ dành cho nhà phát triển của trình duyệt:
Nếu bạn chạy lệnh npm run build , folder dist sẽ được tạo với ứng dụng đã sẵn sàng để triển khai cho môi trường production và biến ROOT_API sẽ hiển thị giá trị http://www.site.com./api , như đã chỉ định trong prod.env.js
Do đó, ta có thể làm việc với các biến khác nhau cho từng môi trường khác nhau, sử dụng cấu hình tạo sẵn mà mẫu webpack cung cấp cho ta . Nếu bạn sử dụng một mẫu khác, hãy đảm bảo bạn tìm thấy một tính năng tương đương hoặc sử dụng một thư viện như dotenv để quản lý các biến môi trường của bạn .
Còn Vue CLI 3 thì sao?
Nếu ứng dụng của bạn đang sử dụng Vue CLI mới , thay vào đó bạn cần có các file như .env và .env.prod ở folder root của dự án và bao gồm các biến như sau:
VUE_APP_ROOT_API=http://localhost/api VUE_APP_ROOT_API=http://www.site.com/api Ở đây, tiền tố VUE_APP_ rất quan trọng và các biến không có tiền tố đó sẽ không khả dụng trong ứng dụng của bạn.
Các tin liên quan
