由於我們的專案需要在不同環境下進行執行(開發，生產，測試等)，設定process.env這避免我們需要多次的去切換請求的地址以及相關的配置。

預設的有development和production兩種，分別對應執行執行vue-cli-service serve與vue-cli-service build兩種環境。也就是說開發環境預設為development，打包之後的環境預設為production。同時也支援不同環境不同配置，在專案根目錄中配置.env.development與.env.production兩個檔案（使用方法與.env一致），系統根據不同環境獲取不同配置檔案。達到不同環境不同配置的效果。
然而實際開發中，我們不一定只有兩個環境，所以vue-cli也提供了多環境的配置方法。在系統根目錄中配置.env.[environmentName]檔案，然後執行時候加上–mode environmentName就可以將配置檔案切換到對應檔案中去

一 建立.env系列檔案

首先我們在根目錄新建3個檔案，分別為.env.development，.env.production，.env.test

• env.development 模式用於serve，開發環境，就是開始環境的時候會引用這個檔案裡面的配置
• .env.production模式用於build，線上環境
• .env.test 測試環境

二 修改.env系列檔案

.env.development

VUE_APP_BASE_API = 'http://localhost:8091/api/'

.env.production

VUE_APP_BASE_API = 'http://jstudio.org/api/
 
'

.env.test

VUE_APP_BASE_API = 'http://192.169.123:8092/api/'

四更改package.json檔案

  "scripts": {
    "dev": "vue-cli-service serve",
    "test": "vue-cli-service serve --mode test",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:test": "vue-cli-service build --mode test
 
",
    "lint": "vue-cli-service lint"
  }

五 使用

當需要用到該變數是可以用process.env.VUE_APP_BASE_API進行取值。

例如在js檔案中直接使用

const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 10000,
})

1.Vue2.0頁面寫法

在data中使用

<template>
    <div>
        <a :href="this.uploadUrl">點選</a>
    </div>
</template>

<script>
export default {
    data() {
        return {
            uploadUrl: process.env.VUE_APP_BASE_API,
        }
    }
}
</script>

在computed() 中使用

<template>
    <div>
        <a :href="VUE_APP_BASE_API">點選</a>
    </div>
</template>

<script>
export default {
    computed: {
        VUE_APP_BASE_API(){
            return process.env.VUE_APP_BASE_API
        }
    }
}
</script>

2.Vue3.0頁面寫法

在setup()引用

<template>
    <div>
        <a :href="uploadUrl">點選</a>
    </div>
</template>

<script>
export default {
    setup() {
        return {
            uploadUrl:'process.env.VUE_APP_BASE_API'
        }
    }
}
</script>

在computed()中使用

<template>
    <div>
        <a :href="VUE_APP_BASE_API">點選</a>
    </div>
</template>

<script>
import { computed } from 'vue'
export default {
    setup() {
        const VUE_APP_BASE_API = computed(()=>{
            return process.env.VUE_APP_BASE_API
        })
        return {
            VUE_APP_BASE_API
        }
    }
}
</script>