目錄

• 1、前言
• 2、場景
• 3、建立環境
• 3.1 注入環境變數
  
• 4、最後

1、前言

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

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

2、場景

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

• 測試環境(test) api=test.ydhtml.com

• 預釋出環境(rc) api=rc.ydhtml.com

• 線上環境(production) api=ydhtml.com

3、建立環境

接下來我們在專案的根目錄中建立 env.

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

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

如下：

"www.cppcns.combuild:test": "cross-env MODE=test nuxt build","build:rc": "cross-env MODE=rc nwww.cppcns.comuxt 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 多環境變數配置內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！