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

Ubuntu 20.04 Chinese input method installation steps

This article installs Google Input Method. In fac...

Tutorial on installing MySQL8 compressed package version on Win10

1 Download MySQL8 from the official website and i...

A brief analysis of the difference between static and self in PHP classes

Use self:: or __CLASS__ to get a static reference...

Detailed steps to configure MySQL remote connection under Alibaba Cloud

Preface As we all know, by default, the MySQL ins...

An article to understand what is MySQL Index Pushdown (ICP)

Table of contents 1. Introduction 2. Principle II...

How to move a red rectangle with the mouse in Linux character terminal

Everything is a file! UNIX has already said it. E...

Detailed process of building nfs server using Docker's NFS-Ganesha image

Table of contents 1. Introduction to NFS-Ganesha ...

react-beautiful-dnd implements component drag and drop function

Table of contents 1. Installation 2.APi 3. react-...

How to use JavaScript and CSS correctly in XHTML documents

In more and more websites, the use of XHTML is rep...

The difference between where and on in MySQL and when to use them

When I was writing join table queries before, I a...

jQuery Ajax chatbot implementation case study

Chatbots can save a lot of manual work and can be...

Two implementation solutions for vuex data persistence

Table of contents Business requirements: Solution...

How to add a disk in Vmware: Expand the disk

This article describes how to add or expand a dis...

Use of hasOwnProperty method of js attribute object

Object's hasOwnProperty() method returns a Bo...