(十九)vue配置相应的运行环境 环境变量

vue配置相应的运行环境 环境变量

参考文章https://www.cnblogs.com/sese/p/11905402.html

目的:

项目开发过程中,至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同,若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生,我们只需做简单的配置,把环境状态切换的工作交给代码。

方法:

官网说的:
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201017163927293.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTI0MDg2,size_16,color_FFFFFF,t_70#pic_center)
在根目录下创建.env.xxx文件,例如.env.development,.env.production,.env.staging,等等就是你想使用的相关运行环境的名称。
2>.![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201017164216310.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTI0MDg2,size_16,color_FFFFFF,t_70#pic_center)
3.文件内容:
配置你需要切换的服务器连接地址,其他项目名称,以及打包后的文件地址。
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201017165250451.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTI0MDg2,size_16,color_FFFFFF,t_70#pic_center)
4.使用:运行相关的命令 执行相应的环境
文件已创建好,配置语句也已写好。怎么用它呢?

首页你需要哪个环境,就执行哪个环境的命令语句。

比如我现在需要local环境,就执行 npm run local-serve

posted @ 2020-10-17 16:55  无梦南柯  阅读(1101)  评论(0)    收藏  举报