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

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

一、项目结构

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

新版本生成的项目结构如下图
相比之下，少了build和config文件夹，因此配置的方式也不一样

二、目的

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

三、配置

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

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

• .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文件中，参考生成的模板代码，可以这样写↓

四、验证

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

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