在日常开发中，我们开发的项目一般会在不同环境运行或者打包到不同环境，不同环境也有不同的接口等服务地址，因此我们在运行或打包项目时要确保配置的环境地址是正确的，才能保证项目按预期目标良好地运行。然而，如果要在每次运行或打包到不同环境都手动改变相应的地址指向，会显得非常繁琐且容易出错。为了我们更加专注于开发项目而非在改变各种配置中手忙脚乱，webpack为我们提供了配置环境变量的方式。以下简要的分析一下。
一、构建环境变量文件
如下图：构建了一个.env.dev与.env.test两个文件，并定义了三个变量（注意变量命名方式）。变量定义注意事项可以参考Vue cli模式和环境变量。
二、在vue.config.js配置环境变量
如下图：定义了apiURL与fileURL用于接收环境变量
三、在index.html中使用环境变量
1.引用vue.config.js配置的变量
2.直接引用全局环境变量
3.直接使用.env.xxx定义的变量
四、在package.josn配置本地运行命令
五、运行结果
1.npm run serve:dev
2.npm run serve:test
3.npm run build:dev
4.npm run build:test
最后夸奖一下球球宝贝OvO，才有本文章大放异彩
以上内容如有纰漏或更优解，望不吝赐教~
