# 【vue基础篇】一看就懂的vue环境变量配置

这是基于cli3.x版本的环境变量配置指南。没有过多复杂的介绍，只有极简的实用配置。旨在给须要的朋友提供帮助以及本身温故知新，真正一看就会懂，懂了就能用。

配置环境变量的目的

项目开发过程当中，至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不一样阶段请求的状态(如接口地址等)不尽相同，若手动切换接口地址是至关繁琐且易出错的。因而环境变量配置的需求就应运而生，咱们只需作简单的配置，把环境状态切换的工做交给代码。

配置步骤

1. 首先在项目根目录下(与package.json同级)新建三个".env"文件

如上，三个".env"文件后缀名为development、production、test，分别对应为开发环境、生产环境和测试环境

.env.development

.env.production

.env.test

2. 配置package.json文件

在 vue-cli-service 命令后加上对应".env"文件名字。配置完成后，当咱们运行 npm run xxx 命令时会执行对应的".env"文件。从而实现环境变量配置功能。

3. 使用配置的环境变量

配置vue.config.js文件

在根目录下新建 “vue.config.js” 文件，并打印 process.env.VUE_APP_SERVER_URL 的内容，而后运行 npm run serve 命令。能够看到命令行在执行“vue-cli-service serve”的同时加上了“--mode development”，紧接着输出了“.env.development”文件内的接口地址————“http://development”。说明此时咱们的环境变量已经配置成功了！

接下来运行npm run build 命令

咱们发现命令行执行了“vue-cli-serve build”的同时加上了“--mode production”，而且输出的接口地址也对应更改了。再看左侧目录下新增了一个打包后的文件夹。再次说明咱们的环境变量已经配置成功了！

最后再极其不肯的执行npm run test 命令

呐，一样作了对应的输出与更改。至此，咱们的vue环境变量配置圆满成功！

须要注意，在使用的时候记得调用 process.env 变量哦

顺便一提，在生产环境下记得设置productionSourceMap值为false，以减小打包后的项目体积(大概能减小百分之六七十左右)，这只是vue项目优化的一个点，此处不作过多讲解，有关项目优化内容下次再单独写一篇文章。

结语

• ".env"文件命名不必定非要development、production、test。是能够自定义的，前提是得在package.json里面作对应的名称修改！(注意命名要语义化方便理解)

• 详情参照cli官方文档

• 感谢你们支持，如有不足或错误的地方请多指正。一块儿学习进步！笔芯~