共计 1047 个字符，预计需要花费 3 分钟才能阅读完成。
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 文件内写一个这样的脚本 如果我们用命令行 ’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 文件中，参考生成的模板代码，可以这样写↓
四、验证
接下来，要验证我们用命令“npm run serve”启动项目，是否能获取到对应模式下的环境配置，直接上图好了。
我们已经配置成功了，接下来调用 api 就要用到 axios 或者其他的工具，按照相应的配置方式进行配置就搞定啦(^-^)V
