Vue-CLI(3.X)项目中实现分环境请求API

Vue脚手架升级到3后，生成的项目结构有了一些改变，最近作的一个项目用了新版的脚手架，借此，记录一下如何配置实现分环境配置请求不一样的后端service地址。

1、项目结构

若是你的vue-cli版本仍是老版本，请先卸载原来的版本（npm uninstall vue-cli -g 或 yarn global remove vue-cli），再安装新版本（npm install -g @vue/cli 或 yarn global add @vue/cli）。

新版本生成的项目结构以下图
相比之下，少了build和config文件夹，所以配置的方式也不同

2、目的

为何要把项目进行分环境配置呢？这在实际的项目开发中是颇有必要的，项目上线(production)前须要有一个通过反复测试的稳定版（verification）本，而开发者须要有另外一个环境(dev)进行开发和自测，这样才不会影响到稳定的环境……（这些是我结合本身实际的项目经验总结出来的，或许你们有不一样的经历）因此，在先后端分离的项目里，前端和后端都要配置不一样的环境。所以，就有这一篇文章，记录一下我的的实践。

3、配置

进入正题，让咱们参考官方文档愉快地配置吧~

• package.json文件
  模式是 Vue CLI 项目中一个重要的概念。好比咱们在package.json文件内写一个这样的脚本
  若是咱们用命令行'npm run serve'启动项目，就表示当前项目的模式是'qa'。

• .env.XX
  定义好了模式以后，怎么把它和项目环境联系在一块儿呢？咱们须要在项目的根目录下建立名为.env.[mode]的文本文件，在这里咱们建立.env.qa文件，那么当项目启动时，在这个文件里声明过的变量就会在qa模式下被载入。所以，咱们能够声明当前模式下的NODE_ENV。注意：只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。除了 VUE_APP_* 变量以外，在你的应用代码中始终可用的还有两个特殊的变量：NODE_ENV & BASE_URL。
• NODE_ENV
  咱们能够经过process.env.NODE_ENV得到到在相应模式下的.env.[mode] 内配置的值；
  在html文件中，参考生成的模板代码，能够这样写↓

4、验证

接下来，要验证咱们用命令“npm run serve”启动项目，是否能获取到对应模式下的环境配置，直接上图好了。

咱们已经配置成功了，接下来调用api就要用到axios或者其余的工具，按照相应的配置方式进行配置就搞定啦(＾－＾)V