190-Vue中环境变量的配置

目录

190-Vue中环境变量的配置

vue设置环境变量

在开发的时候一般会有是三个环境：开发环境 测试环境 线上环境

vue 中有个概念就是模式，默认先vue cli 有三个模式

• development模式用于 vue-cli-service serve 
• production模式用于 vue-cli-service serve --mode production
• devtest模式用于 vue-cli-service serve --mode devtest

但是往往开发的时候可能不止有三种：

• 开发环境（development）
• 测试环境（devtest）
• 生产环境（production）

创建不同环境变量文件

通过为.env文件增加后缀来设置某个模式下特有的环境变量。

给.env文件添加内容，基本格式如下：

NODE_ENV=环境名称

VUE_APP_BASE_URL=对应的环境地址 

VUE_APP_LI_SI=“注备名称”

如我本地环境的配置就如下图所示：

在package.json中添加不同环境对应的执行语句 

我自己的项目配置如下图：

另外需要在vue.config.js里面配置一下代理：（如果有代理的话） 

文件已创建好，配置语句也已写好。怎么用它呢？

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

比如我现在需要production环境，就执行 npm run production 。

然后通过 process.env.NODE_ENV 获取环境名；

通过 process.env.VUE_APP_BASE_URL 获取环境对应的url。

执行结果如下：

 总而言之就是，你需要哪个环境变量，就 【npm run 对应的环境变量】 就完事了！