nuxt. js multi environment variable configuration

Directory 1, Preface 2, Scenario 3, Create Environment 3.1 Inject Environment Variables
4. Finally

1. Preface

1. In our project development, 1 will have the following three environments

The development environment is also called the test environment ( test ) RC The environment is also called a pre-release environment ( rc ) Online environment ( production )

2. Scene

Then there is a situation where we need to distinguish different in different environments api Interfaces such as

Test environment (test) api=test.ydhtml.com
Pre-release environment ( rc) api=rc.ydhtml.com
Online environment (production) api=ydhtml.com

3. Create an environment

Next, we create in the root directory of the project env.js The contents of the document are as follows

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

After configuring the corresponding environment, we set the package.json Under RC0 Add packaging commands,

As follows:

"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 Injecting Environment Variables

Open nuxt.config.js File, add the following code

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

4. Finally

Finally, we use it in the page, and the code is as follows:

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

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