nuxt.js multiple environment variable configuration

1. Introduction

Generally in our project development, there are usually the following three environments

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

2. Scenario

Then there is a situation where we need to distinguish different api interfaces in different environments, for example

• 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 the env.js file in the root directory of the project with the following content

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

After configuring the corresponding environment, we add packaging commands to scripts under package.json .

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 the nuxt.config.js file and 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. 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]

This is the end of this article about nuxt.js multi-environment variable configuration. For more related nuxt.js multi-environment variable configuration content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!