nuxt.js multiple environment variable configuration

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!

You may also be interested in:
  • New ideas for time formatting in JavaScript toLocaleString()
  • isPrototypeOf Function in JavaScript
  • Detailed explanation of JavaScript prototype chain
  • JavaScript Composition and Inheritance Explained
  • Detailed explanation of js event delegation
  • Differences and usage examples of for, for...in, for...of and forEach in JS
  • Javascript uses the integrity attribute for security verification

<<:  CSS animation property usage and example code (transition/transform/animation)

>>:  Common HTML tag writing errors

Recommend

Example of ellipsis when CSS multi-line text overflows

Ellipses appear when multi-line text overflows Th...

When you enter a URL, what exactly happens in the background?

As a software developer, you must have a complete...

Detailed explanation of Navicat's slow remote connection to MySQL

The final solution is in the last picture If you ...

Use of Linux ls command

1. Introduction The ls command is used to display...

Implementation of modifying configuration files in Docker container

1. Enter the container docker run [option] image ...

MySQL 5.7.27 installation and configuration method graphic tutorial

The installation tutorial of MySQL 5.7.27 is reco...

The viewport in the meta tag controls the device screen css

Copy code The code is as follows: <meta name=&...

mysql installer community 8.0.12.0 installation graphic tutorial

This tutorial shares the installation of mysql in...

Vue implements mobile phone verification code login

This article shares the specific code of Vue to i...

Detailed explanation of MySQL deadlock and database and table sharding issues

Record the problem points of MySQL production. Bu...

Detailed Example of JavaScript Array Methods

Table of contents Introduction Creating an Array ...

Detailed explanation of Vue life cycle

Table of contents Why understand the life cycle W...

Docker deploys net5 program to achieve cross-platform functions

Deployment environment: docker container, liunx s...