Nuxt project: Global get process Env information

One 、 project ：nuxt project

Two 、 demand ：

Environment variable configuration

At the start of the project Or after packing , Get a global variable information , So we can do something .

3、 ... and 、 What information does an environment variable usually contain ：

NODE_ENV： Defined in the project scaffold , Tell us it's a development environment （development） Or online environment （production）

PROJECT_NAME: Project name , Tell us what the current project is . In large projects with multiple projects, it is very important .

API_SERVER： The service to which the interface address belongs .

MODE： The current project environment （dev、test、uat、pre、prd）

Four 、 How to define 、 Using environment variables ：

4.1、 stay .env The document defines

4.2、 stay package.json file scripts To define ：

//  What is defined here MODE、PRO Are defined environment variables 
"scripts": {
    "dev": "cross-env MODE=DEMO PRO=CHAAA nuxt",
  },

4.3、 stay nuxt.config.js file env Configuration in ：

// .env All variables defined inside can be defined here 
//  Empathy package.json The defined in can also be configured here 
env: {
    COOKIE_PATH: process.env.COOKIE_PATH || '/',
    PUBLIC_PATH: process.env.PUBLIC_PATH || '/',
    SERVER_NAME: process.env.PUBLIC_PATH || '/',
    API_SERVER: process.env.API_SERVER || '/',
    MODE: process.env.MODE || '/',
    PUBLIC_TEST: process.env.PUBLIC_TEST || '/',
  },

4.2.3、 Use

//  Find one js file , After re project , Print information 
console.log('49env-DEVELOPMENT-PRODUCTION', process.env.NODE_ENV)
console.log('50env', process.env.PUBLIC_PATH)
console.log('51env', process.env.SERVER_NAME)
console.log('52env', process.env.API_SERVER)
console.log('53env', process.env.API_SERVER_Z)
console.log('54env', process.env.MODE)
console.log('55env', process.env.PRO)
console.log('56env', process.env.PUBLIC_TEST)

The browser prints the corresponding information ： 

5、 ... and 、 elementary analysis
process Objects are global variables , It provides the current node.js about , And control the current node.js Relevant processes of . Because it's a global variable , For it node Applications are always available , There is no need to require().

since process It's all one object ,env Nature is one of its properties , This property returns the object containing the user's environment information . Input... At the terminal node after , In the input process.env You can see the printed information .

process.env yes node Environment variables in , You can't get it directly in the module , such as .js、.vue, You need to configure DefinePlugin.

DefinePlugin You can define some global variables , Let's use... Directly in the module , Don't make any statements .

Please note that ,Nuxt Use webpack Of definePlugin To define environment variables . It means Node.js Medium process or process.env Neither available nor defined .nuxt.config.js Each of the env Attributes are individually mapped to process.env.xxxx And perform conversion during compilation .

intend ,console.log(process.env) Will output {}, but console.log(process.env.you_var) Your value will still be output . It will process.env.your_var Replace all instances of with the value you set to . namely ：env.test ='testing123'. If you use... Somewhere in the code process.env.test, It is actually translated into 'testing123'.

6、 ... and 、 Reference link ：

vue How to package the project according to the environment ? How to be in vue Use... In the document process.env? - Simple books

vue.js Medium process.env - You know

webpack.DefinePlugin- A plug-in that defines global variables _song854601134 The blog of -CSDN Blog _defineplugin

webpack.DefinePlugin Define global variables _ People's blog in Sri Lanka -CSDN Blog _webpack Define global variables

node The production of env How to inject files _process.env.NODE_ENV Related issues _weixin_39641334 The blog of -CSDN Blog node The production of env How to inject files _Vue Function process.env.NODE_ENV_weixin_39681621 The blog of -CSDN Blog

API: Environment variable configuration - NuxtJS | Nuxt.js Chinese net