在 Vue 項目中是使用 .env 文件來定義和使用不同的環(huán)境變量，這些文件在 Vue 項目根目錄下創(chuàng)建。推薦有幾種環(huán)境就創(chuàng)建幾個 .env 文件，下面就開發(fā)環(huán)境和生產(chǎn)環(huán)境這兩種環(huán)境來簡單說明一下配置環(huán)境變量的方法。

1. 創(chuàng)建開發(fā)環(huán)境配置文件

創(chuàng)建名為.env.development文件，并寫入變量。

NODE_ENV = 'development'
VUE_DATA_API = 'http://localhost:8000'

2. 創(chuàng)建正式環(huán)境配置文件

創(chuàng)建名為.env.production文件，并寫入變量。

NODE_ENV = 'production'
VUE_DATA_API = 'http://101.156.193.11:8000'

3. 在代碼中訪問環(huán)境變量

在代碼中使用使用 process.env 對象來訪問這些環(huán)境變量， 例如：process.env.NODE_ENV 。

4. 加載環(huán)境變量

在構建或運行Vue項目時，根據(jù).env文件的名稱，它們會被自動加載到項目中。例如.env.development文件，它將在開發(fā)模式下加載。

如果項目使用的是 Vue CLI 腳手架，則可以通過在命令行中添加 --mode 參數(shù)來指定要加載哪種模式的環(huán)境變量。例如：vue-cli-service serve --mode development 會在運行時加載 .env.development 文件中的變量。下面是幾個命令行實例：

  "scripts": {// 運行默認加載開發(fā)環(huán)境變量"serve": "vue-cli-service serve",// 運行指定加載生產(chǎn)環(huán)境變量"serve:pro": "vue-cli-service serve --mode production",// 運行指定加載開發(fā)環(huán)境變量"serve:dev": "vue-cli-service serve --mode development",// 構建默認加載生產(chǎn)環(huán)境變量"build": "vue-cli-service build",// 構建指定加載生產(chǎn)環(huán)境變量"build:pro": "vue-cli-service build --mode production",}

本篇完~~