vue環(huán)境變量配置之process.env怎么配置

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

vue環(huán)境變量配置process.env

在用vue框架時，經(jīng)常用到兩種環(huán)境，一種是開發(fā)環(huán)境，就是本地開發(fā)時的環(huán)境，一種是生產(chǎn)環(huán)境，就是要發(fā)布到線上的環(huán)境。

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

下面開始：

配置環(huán)境的實現(xiàn)原理

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

具體實例

1. 安裝依賴

npm install process

2.創(chuàng)建.env.dev 和.env.prod兩個文件

注意文件要創(chuàng)建在根目錄下面

.env.dev文件內(nèi)容如下：

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

.env.prod文件內(nèi)容如下：

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

3.設(shè)置項目啟動時默認(rèn)的環(huán)境

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

package.json部分內(nèi)容如下：

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

4.查看環(huán)境是否配置成功

在main.js文件中打印當(dāng)前環(huán)境，輸出就成功了

console.log(process.env.NODE_ENV)

vue3 process.env.XXX環(huán)境變量不生效

問題

使用process.env.XXX時獲取不到環(huán)境變量的值：

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

解決

項目根目錄下的.env.development和.env.production環(huán)境配置文件中，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環(huán)境配置文件中變量名必須以VUE_APP_開頭

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