nuxt.js 多環境變量配置

Posted on by

1、前言

一般在我們項目開發中，一般會有以下3個環境

  • 開發環境也叫測試環境(test)
  • RC環境也叫預發佈環境(rc)
  • 線上環境(production)

2、場景

那麼有一種情況是我們需要在不同環境下區分不同的api接口例如

  • 測試環境(test) api=test.ydhtml.com
  • 預發佈環境(rc) api=rc.ydhtml.com
  • 線上環境(production) api=ydhtml.com

3、創建環境

接下來我們在項目的根目錄中創建 env.js 文件內容如下

module.exports = {
    test: {
        MODE: 'test'
    },
    rc: {
        MODE: 'rc',
    },
    prod: {
        MODE: 'prod',
    }
}

配置好對應得環境之後，我們在 package.json 下得 scripts增加打包命令，

如下： 

"build:test": "cross-env MODE=test nuxt build",
"build:rc": "cross-env MODE=rc nuxt build",
"build:prod": "cross-env MODE=prod nuxt build",

3.1 註入環境變量

打開nuxt.config.js 文件，增加以下代碼

const env = require('./env')
module.exports = {
    env: {
        NUXT_ENV: env[process.env.MODE]
    }
}

4、最後

最後我們在頁面裡面使用，代碼如下：

const api = {
    prod: 'http://ydhtml.com',
    test: 'http://test-ydhtml.com',
    rc: 'http://rc-ydhtml.com'
}

const baseURL = api[process.env.NUXT_ENV.MODE]

到此這篇關於nuxt.js 多環境變量配置的文章就介紹到這瞭,更多相關nuxt.js 多環境變量配置內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：