Vue環境變數詳解

一、環境變數的概念

環境變數在很多編程語言中都是一個非常重要的概念，它是一種動態的變數，與操作系統的環境有關，可以在程序運行的時候被讀取和修改，常用於存儲一些程序運行所需的常量、路徑、配置等信息。

在Vue中，環境變數主要用來管理開發環境、測試環境和生產環境的配置信息，如API地址、版本號等，在不同的場景中採用不同的配置信息，提高開發效率和代碼可移植性。

二、如何使用Vue環境變數

Vue提供了一個稱為「環境變數」的機制，你可以在你的項目中使用不同的環境變數文件，來定製不同部署環境中的配置。

在VueCLI 3的項目中，我們可以使用一個特殊的文件：`.env`，來設置環境變數，如定義一個名為`VUE_APP_BASE_API`的環境變數，用於設置請求的API地址：

 # .env文件中：
VUE_APP_BASE_API=http://localhost:8080/api

我們可以在Vue的組件中使用這個環境變數：

<template>
  <div>
    <h1>{{title}}</h1>
    <p>API地址：{{api}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello Vue',
      api: process.env.VUE_APP_BASE_API
    }
  }
}
</script>

在上面的代碼中，使用了Vue提供的`process.env`對象，在Vue組件中可以訪問到這些特殊的環境變數。我們可以在不同的環境中設置不同的`.env`文件，來實現對開發，測試和生產環境的不同配置。

三、自定義環境變數

除了使用`VUE_APP_`前綴定義環境變數之外，我們還可以自定義其他的環境變數。在`.env`文件中，你可以定義任意數量的環境變數，格式如下：

 # .env文件中：
API_VERSION=v1.0.0
API_HOST=http://localhost:8080/api

# 在組件中使用自定義環境變數
process.env.API_VERSION
process.env.API_HOST

這樣我們就可以在Vue組件中輕鬆地訪問自定義的環境變數。

四、不同環境使用不同的配置

通常我們會在不同的環境中使用不同的配置，例如開發環境和生產環境的API地址是不同的。VueCLI 3允許我們為不同的環境定義不同的`.env`文件，以滿足這種需求。

在VueCLI 3中，一個`.env`文件只適用於一個特定的環境，如`.env.development`只適用於開發環境，`.env.production`只適用於生產環境。如果我們希望在開發和生產環境分別使用不同的API地址，我們可以這樣做：

 # .env.development文件中：
API_HOST=http://localhost:8080/api

 # .env.production文件中：
API_HOST=https://api.example.com

這樣，我們就可以在開發環境和生產環境中分別使用不同的API地址。

五、Vue-CLI 3.x中環境變數的優先順序順序

在Vue-CLI 3.x中，環境變數的優先順序按照以下順序：

在JS中使用`process.env`對象
`.env.local`文件
`.env.[mode]`文件，如`.env.production`
`.env`文件
在命令行中傳遞的環境變數

這種優先順序順序允許我們在不同情況下方便地覆蓋和擴展特定的環境變數。

六、Webpack的環境變數

VueCLI 3底層包含一個Webpack編譯器，我們也可以使用Webpack的DefinePlugin插件來設置環境變數。在`vue.config.js`文件中的`configureWebpack`配置項中添加以下代碼：

 // vue.config.js文件
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify(process.env.NODE_ENV),
          API_HOST: JSON.stringify(process.env.API_HOST)
        }
      })
    ]
  }
}

上面的代碼中，我們通過Webpack的DefinePlugin將環境變數綁定到了全局的`process.env`對象上，使得我們可以在任意的組件中使用這些環境變數。

七、封裝環境變數

為了在應用中方便地使用各種環境變數，我們可以把它們封裝到一個配置文件中。一種常見的做法是創建一個`.env.js`文件，定義不同環境的配置信息：

 // .env.js文件
const dev = {
  API_HOST: 'http://localhost:8080/api'
}

const prod = {
  API_HOST: 'https://api.example.com'
}

export default process.env.NODE_ENV === 'production' ? prod : dev

在上面的代碼中，我們根據環境變數中的`NODE_ENV`來判斷當前是開發環境還是生產環境，然後返回相應的配置信息。然後我們就可以在代碼中引入這個`.env.js`文件，並使用其中的環境變數：

 // main.js文件中
import env from './.env.js'

Vue.prototype.$env = env

 // 組件中使用封裝好的環境變數
this.$env.API_HOST

通過封裝環境變數，我們可以方便地在應用中使用和管理環境變數，代碼也更加清晰。

八、總結

Vue環境變數使得我們可以在開發、測試、生產等不同環境下進行定製化的配置，減少了代碼的重複和可移植性的問題。在VueCLI 3中，我們可以使用`.env`文件來定義環境變數，同時還可以通過自定義環境變數、不同`.env`文件和Webpack的DefinePlugin來進行配置。為了方便使用和管理環境變數，我們還可以將它們封裝到一個`.env.js`文件中。

原創文章，作者：TYXJQ，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/369590.html