Vue项目中全局变量process的用法解析

一、什么是process

        process对象是一个全局变量，提供了有关当前Node.js进程的信息并对其进行控制。常用于Vue项目中环境区分，对不同环境的配置不同，例如：根据全局变量区分请求的url地址、是否开始eslint、不同环境的特殊配置等等。

        可以在项目中新建js文件，输出process，得到一个配置对象。过多就仅展示部分截图：

二、如何使用process进行环境的区分

        Vue项目中有三个模式：production、development、test

        1.模式

        在vue-cli中模式是一个重要的概念，默认情况下有三个模式。

        对于下面所说的命令，大家可以看一下项目中的package.json文件，一看就明白了

1. development 模式用于 vue-cli-service serve
2. production 模式用于 vue-cli-service build 和 vue-cli-service test:unit
3. test 模式用于 vue-cli-service test:unit

development模式对应我们开发环境对应的命令是 serve命令，也就是说我们启动项目后就在development模式下运行

production模式对应打包命令build。打包后在production模式下运行

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量：

vue-cli-service build --mode development

        总结，可以通过命令动态配置，配置对于模式下对应那些配置。

        我们一般通过.env文件进行请求地址的配置，例如存在多个地址的情况，可以通过命令进行灵活配置。

        2.process.env环境对象

        在不同的模式会有不同的环境变量

在 development 模式下 NODE_ENV 的值会被设置为 “development”
在 production模式下 NODE_ENV 的值会被设置为 “production” 

        3..env文件的执行顺序

.env 无论开发环境还是生产环境都会加载的配置文件
.env.development 开发环境加载的配置文件
.env.production 生产环境加载的配置文件

研发环境 加载顺序：.env .env.development 同一个变量名 后者会覆盖前者
生产环境 加载顺序：.env .env.production 同一个变量名 后者会覆盖前者

三、 process的使用

        1.用于不同环境请求地址的区分

        新建.env文件，例如.env.development，在development环境下会载入该文件声明的变量。

        以VUE_APP_开头的变量会被webpack.definePlugin 静态嵌入到客户端侧的包中，访问时  process.env.VUE_APP_SECRET，添加变量直接以VUE_APP_* 的形式就可

# just a flag
NODE_ENV = 'development'

# base api
 VUE_APP_BASE_API = 'http://10.0.0.165:9588'

    然后请求url就可以拿到对应的值了

const service=axios.create({
    baseURL: process.env.VUE_APP_BASE_API,//请求地址
    timeout: 10000,//请求超时时间，如果超给改时间会中断
    // headers: {'X-Custom-Header': 'foobar'}//自定义请求头
})