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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。