木灵鱼儿

木灵鱼儿

阅读：693

最后更新：2020/10/20/ 11:46:46

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_ENV、process.env.VUE_APP_BASEURL

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

4. 优先级

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

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

  • development 模式用于 vue-cli-service serve
  • production 模式用于 vue-cli-service build 和 vue-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)

没测试

文章分类 vue 项目实战
文章标签 vue环境变量envlocal
木灵鱼儿

木灵鱼儿

发布了 583 篇文章获得点赞 0获得阅读 693

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 0
文章被阅读 693

相关文章

meta name= viewport 知识补充meta name= viewport 知识补充
flex布局知识补充flex布局知识补充
vue cli3-cli4 打包后项目在二级路径的方法vue cli3-cli4 打包后项目在二级路径的方法
不同平台的回车处理 warning Delete `␍` prettier prettier不同平台的回车处理 warning Delete `␍` prettier prettier
windows下软链接和硬链接windows下软链接和硬链接