VueJS: Các biến và chế độ môi trường

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Bạn có thể chỉ định các biến env bằng cách đặt các tệp sau vào gốc dự án của bạn:

.env                # nạp trong tất cả các trường hợp
.env.local          # nạp trong tất cả các trường hợp, ngoại trừ git
.env.[mode]         # chỉ được nạp trong chế độ được chỉ định
.env.[mode].local   # chỉ được nạp trong chế độ được chỉ định, ngoại trừ git

Tệp env chỉ chứa các cặp khóa = giá trị của biến môi trường:

FOO=bar
VUE_APP_SECRET=secret

Các biến được tải sẽ có sẵn cho tất cả các lệnh vue-cli-service, plugin và dependency.

Env Loading Priorities

Một tệp env cho một chế độ cụ thể (ví dụ .env.production) sẽ có mức độ ưu tiên cao hơn so với một chế độ chung (ví dụ .env).

Ngoài ra, các biến môi trường đã tồn tại khi Vue CLI được bootstrapped có mức độ ưu tiên cao nhất và sẽ không bị ghi đè bởi các tệp .env.

NODE_ENV

Nếu bạn có một mặc định NODE_ENV trong môi trường của bạn, bạn nên loại bỏ nó hoặc thiết lập tường mình NODE_ENV khi chạy các lệnh vue-cli-service.

Mode

Mode là một khái niệm quan trọng trong các dự án Vue CLI. Theo mặc định, có ba mode trong một dự án Vue CLI:

  • development được sử dụng bởi vue-cli-service serve
  • production được sử dụng bởi vue-cli-service build và vue-cli-service test:e2e
  • test được sử dụng bởi vue-cli-service test:unit

Lưu ý rằng mode khác với NODE_ENV, một mode có thể chứa nhiều biến môi trường. Điều đó nói rằng, mỗi mode được đặt thành NODE_ENV cùng một giá trị theo mặc định - ví dụ: NODE_ENV sẽ được đặt "development"ở chế độ development.

Bạn có thể đặt biến môi trường chỉ có sẵn cho một mode nhất định bằng cách postfixing tệp .env. Ví dụ, nếu bạn tạo một tệp có tên .env.development trong thư mục gốc của dự án, thì các biến được khai báo trong tệp đó sẽ chỉ được tải trong chế độ development.

Bạn có thể ghi đè lên chế độ mặc định được sử dụng cho một lệnh bằng cách chuyển cờ tùy chọn --mode. Ví dụ, nếu bạn muốn sử dụng các biến phát triển trong lệnh xây dựng, hãy thêm nó vào các kịch bản lệnh package.json của bạn :

"dev-build": "vue-cli-service build --mode development",

Ví dụ: Chế độ Staging

Giả sử chúng ta có một ứng dụng với tệp .env sau :

VUE_APP_TITLE=My App

Và tệp .env.staging như sau :

NODE_ENV=production
VUE_APP_TITLE=My App (staging)
  • vue-cli-service build xây dựng một ứng dụng production, tải .env.env.production và .env.production.local nếu chúng có mặt;

  • vue-cli-service build --mode staging xây dựng một ứng dụng production trong chế độ staging, sử dụng .env.env.staging và .env.staging.local nếu chúng có mặt.

Trong cả hai trường hợp, ứng dụng được xây dựng dưới dạng ứng dụng production vì NODE_ENV, nhưng trong phiên bản staging, process.env.VUE_APP_TITLE được ghi đè bằng một giá trị khác.

Sử dụng biến Env trong mã trình khách

Chỉ các biến bắt đầu bằng VUE_APP_ sẽ được nhúng tĩnh vào gói ứng dụng khách webpack.DefinePlugin. Bạn có thể truy cập chúng trong mã ứng dụng của bạn:

console.log(process.env.VUE_APP_SECRET)

Trong quá trình xây dựng, process.env.VUE_APP_SECRET sẽ được thay thế bằng giá trị tương ứng. Trong trường hợp VUE_APP_SECRET=secret, nó sẽ được thay thế bằng "secret".

Ngoài các biến VUE_APP_*, cũng có hai biến đặc biệt sẽ luôn có sẵn trong mã ứng dụng của bạn:

  • NODE_ENV- đây sẽ là một trong "development""production"hoặc "test" tùy thuộc vào chế độ ứng dụng đang chạy bên trong.
  • BASE_URL- điều này tương ứng với tùy chọn baseUrl trong vue.config.js và là đường dẫn cơ sở mà ứng dụng của bạn được triển khai.

Tất cả các biến env được giải quyết sẽ có sẵn bên trong public/index.html như được thảo luận trong HTML - Nội suy.

Gợi ý

Bạn có thể đã tính toán vv env trong tệp vue.config.js của bạn . Chúng vẫn cần phải có tiền tố VUE_APP_. Điều này hữu ích cho thông tin phiên bản process.env.VUE_APP_VERSION = require('./package.json').version

Biến chỉ cục bộ

Đôi khi bạn có thể có các biến env không nên được cam kết trong codebase, đặc biệt nếu dự án của bạn được lưu trữ trong một kho lưu trữ công cộng. Trong trường hợp đó, bạn nên sử dụng một tệp .env.local thay thế. Các tệp env cục bộ sẽ được bỏ qua .gitignore theo mặc định.

.local cũng có thể được thêm vào các tệp env cụ thể theo chế độ, ví dụ: .env.development.local sẽ được tải trong khi phát triển và bị bỏ qua bởi git.xgfg.

» Tiếp: Xây dựng mục tiêu
« Trước: Làm việc với Webpack
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!