這篇文章主要介紹了nuxt.js 多環(huán)境變量配置，一般在香米開發(fā)中會(huì)有三個(gè)環(huán)境開發(fā)環(huán)境也叫測(cè)試環(huán)境(test) 、RC環(huán)境也叫預(yù)發(fā)布環(huán)境(rc) 、線上環(huán)境(production) 下面來看看文章內(nèi)容的詳細(xì)介紹,需要的朋友可以參考一下

1、前言

一般在我們項(xiàng)目開發(fā)中，一般會(huì)有以下3個(gè)環(huán)境

開發(fā)環(huán)境也叫測(cè)試環(huán)境(test)
RC環(huán)境也叫預(yù)發(fā)布環(huán)境(rc)
線上環(huán)境(production)

2、場(chǎng)景

那么有一種情況是我們需要在不同環(huán)境下區(qū)分不同的api接口例如

測(cè)試環(huán)境(test) api=test.ydhtml.com
預(yù)發(fā)布環(huán)境(rc) api=rc.ydhtml.com
線上環(huán)境(production) api=ydhtml.com

3、創(chuàng)建環(huán)境

接下來我們?cè)陧?xiàng)目的根目錄中創(chuàng)建 env.js 文件內(nèi)容如下

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

配置好對(duì)應(yīng)得環(huán)境之后，我們?cè)?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 注入環(huán)境變量

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

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

4、最后

最后我們?cè)陧撁胬锩媸褂?，代碼如下：

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

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

到此這篇關(guān)于nuxt.js 多環(huán)境變量配置的文章就介紹到這了,更多相關(guān)nuxt.js 多環(huán)境變量配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: