一、项目: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'。