VueJS: Các biến và chế độ môi trường
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ìnhNODE_ENV
khi chạy các lệnhvue-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ởivue-cli-service serve
production
được sử dụng bởivue-cli-service build
vàvue-cli-service test:e2e
test
được sử dụng bởivue-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ọnbaseUrl
trongvue.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ảnprocess.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.
Giải phóng thời gian, khai phóng năng lực