1. 关于vue中的webpack环境模式配置详细说明

模式：所谓模式，其实仅仅是告诉vue加载哪个配置文件（比如：.env文件有很多，具体加载哪个配置文件）

环境变量：所谓环境变量是决定程序之后要运行在哪个环境下（比如将环境变量设置为NODE_ENV=development或者NODE_ENV=production）

程序运行的环境差异：设置的环境变量不同，vue内部启动编译打包的结果也会不一样；比如是development环境，则编译的时候就会读取相应的devServe热更新等，代码也不会压缩；但如果是prodution环境，则会压缩代码，并且不读取支持热更新等操作。

为什么要区分不同的env配置文件呢？

因为开发过程中，一般情况下测试环境和生产环境请求的接口地址是不一样的，所以会配置两个或者多个env文件。

2. 配置方式

2.1 默认模式构建打包

优先级：mode指定的优先级 > 默认优先级

现在我们已经知道模式和环境；接下来看看在构建和打包情景下系统默认的几种设置；

vue脚手架中有3个默认的模式：

development模式对应————> vue-cli-service serve

production模式对应————> vue-cli-service build

test模式 ————> vue-cli-service test:unit

  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
   }

当没有使用--mode指定加载哪个env文件时，则默认情况下运行yarn run serve,会执行vue-cli-service serve，并且默认的是development模式同时也是默认development环境；如果执行yarn run build时，实际上运行的"vue-cli-service build脚本，并且系统默认的模式production。同时默认的环境是production环境。

问题来了，如果想在开发环境进行打包，如何配置？

// package.json
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:dev": "vue-cli-service build  --mode devxyz",
    "aaa": ""vue-cli-service build  --mode yyy" // 执行yarn run aaa时，加载的.env.yyy文件，并且如果在.env.yyy文件中指定了`NODE_ENV=development`，则最终就是在开发环境打包
}

新建.env.devxyz文件，接着在env.devxyz文件中指定运行环境NODE_ENV=development

注意：build:dev是随便命名的，只需要在终端执行命令时使用，比如这里命名为aaa，则终端执行命令时就是yarn run aaa；并且--mode后指定的模式也是随便命名的，但必须和env的后缀保持一致，比如这里--mode devxyz，那么就需要创建.env.devxyz文件

// .env.devxyz文件

NODE_ENV=development

// 其他的开发环境配置，比如接口地址等
...

接着在命令行终端执行yarn run build:dev命令，此时会执行vue-cli-service build --mode devxyz脚本命令，读取的是.env.devxyz配置文件，并且通过NODE_ENV=development确定了开发环境，但vue-cli-service build --mode devxyz中的build是打包命令，所以最终就是在开发环境进行打包。

2.2 实际操作

在package.json文件的scripts脚本命令对象中，自定义脚本命令名称为testorder，具体的脚本命令是vue-cli-service serve --mode devplus；

接着在终端执行yarn run testorder，看控制台输出，此时实际执行的是vue-cli-service serve --mode devplus，读取的.env.devplus文件，我们在.env.devplus中写入了TEST_LOAD=88888888888进行测试，并且在读完.env.devplus配置文件之后，接着在vue.config.js文件中打印process.env。

执行yarn run testorder的过程中，就可以在终端控制台看到process.env的打印输出，进一步证实，读取的是env.devplus。

下面是代码截图：

备注说明

当前所有的配置仅限于vue项目中；当然这种思想或者说理解也可以帮忙我们理解其他脚手架的配置加载过程。
如何访问env中的定义的变量xxx：通过process.env.xxx的形式访问
vue.config.js问价加载，经过实际操作测试，加载过程是：终端命令行执行完命令之后，会根据指定的模式加载对应的env文件，读取解析env文件，确定程序运行环境，然后解析vue.config.js文件

vue的构建打包环境变量和模式变量

1. 关于vue中的webpack环境模式配置详细说明

2. 配置方式

2.1 默认模式构建打包

2.2 实际操作

备注说明