nuxt项目：全局获取process.env信息

一、项目：nuxt项目

二、需求：

环境变量配置

在项目启动 或打包后，得到全局的一个变量信息，从而我们去做一些事情。

三、环境变量通常包含哪些信息：

NODE_ENV：项目脚手架里定义的，告诉我们是开发环境（development）还是线上环境（production）

PROJECT_NAME: 项目名称，告诉我们当前项目是哪个项目。在多项目配合的大型项目很重要。

API_SERVER：接口地址所属的服务。

MODE：当前项目所处的环境（dev、test、uat、pre、prd）

四、如何定义、使用环境变量：

4.1、在.env文件进行定义

4.2、在package.json文件scripts里进行定义：

// 这里定义的MODE、PRO都是定义的环境变量
"scripts": {
    "dev": "cross-env MODE=DEMO PRO=CHAAA nuxt",
  },

4.3、在nuxt.config.js文件env里进行配置：

// .env里边定义的变量都可以在这里进行定义
// 同理package.json里定义的也可以在这里配置
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、使用

// 找到一个js文件，重新项目后，打印信息
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)

浏览器打印到了对应的信息： 

五、浅析
process对象是全局变量，它提供当前node.js的有关信息，以及控制当前node.js的有关进程。因为是全局变量，它对于node应用程序是始终可用的，无需require()。

既然process都是一个对象了，env自然是它的一个属性，这个属性返回包含用户环境信息的对象。在终端输入node后，在输入process.env可以看到打印出来的信息。

process.env是node中的环境变量，在模块中是无法直接拿到的，比如.js、.vue，还需要配置一下DefinePlugin。

DefinePlugin可以定义一些全局变量，让我们在模块当中直接使用，不用做任何声明。

请注意，Nuxt 使用 webpack 的 definePlugin 来定义环境变量。这意味着 Node.js 中的process或process.env既不可用也不能定义。nuxt.config.js 中定义的每个 env 属性都单独映射到process.env.xxxx并在编译期间进行转换编译。

意思是，console.log(process.env)将输出{}，但console.log(process.env.you_var)仍将输出您的值。它将process.env.your_var的所有实例替换为您将其设置为的值。即：env.test ='testing123'。如果你在代码中的某个地方使用process.env.test，它实际上被翻译成'testing123'。

六、参考链接：

vue如何按照环境打包项目?如何在vue文件中使用process.env? - 简书

vue.js中的process.env - 知乎

webpack.DefinePlugin-定义全局变量的插件_song854601134的博客-CSDN博客_defineplugin

webpack.DefinePlugin定义全局变量_人在斯国的博客-CSDN博客_webpack 定义全局变量

node 生产的env文件怎么注入_process.env.NODE_ENV 相关问题_weixin_39641334的博客-CSDN博客node 生产的env文件怎么注入_Vue函数中的process.env.NODE_ENV_weixin_39681621的博客-CSDN博客

API: 环境变量配置 - NuxtJS | Nuxt.js 中文网