• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

vue 环境变量

环境变量的使用,一般就是替换一下api的url链接,或者是一些其他设置。

比如:

本地测试的时候,你使用的api链接是test.xxx.xxx;而正式上线后,要求改为:formal.xxxx.xxx

这样的话,如果你不使用环境变量,每次打包的时候都需要手动修改默认的api地址段。

非常麻烦,如果你有更多的需求,比如有好几个api应对不同的平台,哦豁,那就真的吐血。

如果使用了环境变量,我们只需要创建一个env文件,然后设置一个固定的值,打包的时候指定使用该env文件,api的获取自动拿到env文件里面设置的值,这样就不用每次都要手动修改了。

知识点

1. 文件名的命名

.env文件是存放在项目根目录,和package.json同级。

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略

带local后缀的env文件,不会被git同步,非常好用,有利于不同测试人员使用不同api,这样共用一个仓库相互不会冲突。

不带mode的env文件,在默认的server和build运行时,都会默认使用。

 "server": "vue-cli-service serve",//默认使用.env或.env.local
 "build": "vue-cli-service build"  //默认使用.env或.env.local

mode是一个自定义的值,比如:.env.test;test就是mode

指定mode

 "server": "vue-cli-service serve --mode test",
 "build": "vue-cli-service build --mode test" 

--mode声明这个运行时需要使用指定的env环境文件,后面空格接一个mode名,我们的test就是mode

2. env文件内容怎么设置

env文件默认没有代码高亮,vscode推荐安装DotENV插件进行代码高亮

env的文件内容是以键值对的形式保存,并且格式都是string,即便你的值设置为true,获取时得到的是一个字符串"true";这里需要注意

例子:

# NODE_ENV 模式的名称: development(开发模式)/ production(生产环境)
NODE_ENV=development

# VUE_APP_BASEURL 线上api地址
VUE_APP_BASEURL=https://xxxx.xxxx.xxx

NODE_ENV: 用于设置vue cli的模式,必填

BASE_URL: 和vue.config.js中的 publicPath 选项相符,即你的应用会部署到的基础路径。选填

自定义变量名: 必须以VUE_APP_开头,否则无法识别,并且值是一个string类型,哪怕设置的值为数字,布尔值等格式,最后获取获取到的值也只是一个string

3.获取环境变量

在项目中通过process.env.xxx来获取,如:process.env.NODE_ENVprocess.env.VUE_APP_BASEURL

被载入的变量将会对 vue-cli所启动的服务中所有命令、插件和依赖可用,也就是说可以在项目的任何地方使用,哪怕是插件。

4. 优先级

为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。

production对应vue-cli的工作模式。

  • development 模式用于 vue-cli-service serve
  • production 模式用于 vue-cli-service buildvue-cli-service test:e2e
  • test 模式用于 vue-cli-service test:unit

此外,Vue CLI 启动时已经存在的环境变量拥有最高优先级,并不会被 .env 文件覆写。

例子1:

我们本地存在这么三个文件:.env、.env.production、.env.production.local

vue-cli-service build 会加载可能存在的 .env.env.production.env.production.local 文件然后构建出生产环境应用;

例子2:

我们本地存在这么三个文件:.env、.env.staging、.env.staging.local

在指定mode的情况下,vue-cli-service build --mode staging 会在 staging 模式下加载可能存在的 .env.env.staging.env.staging.local 文件然后构建出生产环境应用。

4.复写

如果两个或者多个环境变量,可以在对应的值后面加入(staging),这样这个值会覆盖之前已经存在的值。

NODE_ENV=production
VUE_APP_TITLE=My App (staging)

没测试

0
  • 本文分类:vue 项目实战
  • 本文标签:vue环境变量envlocal
  • 流行热度:已超过 66 人围观了本文
  • 最后更新:2020年10月20日 - 11时46分46秒
  • 发布日期:2020年10月20日 - 11时46分46秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码