vue環境變量配置之process.env怎么配置

本篇內容介紹了“vue環境變量配置之process.env怎么配置”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

vue環境變量配置process.env

在用vue框架時，經常用到兩種環境，一種是開發環境，就是本地開發時的環境，一種是生產環境，就是要發布到線上的環境。

平時開發是用生產環境的，如果發布到線上時，需要切換環境為線上。如果人為去切換也是可以的，但是會容易忘記，可以通過配置不同的運行命令來自動切換環境。

下面開始：

配置環境的實現原理

實現原理就是采用node.js頂層對象中的process.env（進程環境，返回一個包含用戶環境信息的對象）屬性，根據各個環境的配置文件區分和切換環境

具體實例

1. 安裝依賴

npm install process

2.創建.env.dev 和.env.prod兩個文件

注意文件要創建在根目錄下面

.env.dev文件內容如下：

NODE_ENV = 'development'
VUE_APP_TITLE = 'development'
/* 請求接口地址 */
VUE_APP_INTERFACE_URL="https://xxx"
/* proxy代理地址 */
VUE_APP_PROXYURL='http://xxx'

.env.prod文件內容如下：

NODE_ENV='production'
VUE_APP_TITLE='prod'
/* 請求接口地址 */
VUE_APP_INTERFACE="https://xxx"

3.設置項目啟動時默認的環境

只需要在項目啟動命令后面修改需要的環境就行了，例如npm run dev，把--mode dev改為--mode prod就變成了開發環境

package.json部分內容如下：

"scripts":{
    "dev":"vue-cli-service serve --mode dev",
    "prod":"vue-cli-service serve --mode prod"
}

4.查看環境是否配置成功

在main.js文件中打印當前環境，輸出就成功了

console.log(process.env.NODE_ENV)

vue3 process.env.XXX環境變量不生效

問題

使用process.env.XXX時獲取不到環境變量的值：

axios.defaults.baseURL = process.env.VUE_APP_BASE_API;

解決

項目根目錄下的.env.development和.env.production環境配置文件中，NODE_ENV=development的值必須和package.json文件啟動配置--mode一致

//.env.development
NODE_ENV=development
VUE_APP_BASE_API=/api
VUE_APP_BASE_URL=http://localhost:8081/
VUE_APP_PROXYURL=http://localhost:8080/

"scripts": {
        "serve": "vue-cli-service serve",
        "dev": "vue-cli-service serve --mode development",
        "prod": "vue-cli-service serve --mode production",
    },

.env.development和.env.production環境配置文件中變量名必須以VUE_APP_開頭

“vue環境變量配置之process.env怎么配置”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！