圆月山庄资源网 Design By www.vgjia.com

我们可以在项目根目录中的下列文件来指定环境变量:

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

一个环境文件只包含环境变量的“键=值”对,并且必须以VUE_APP开始:

FOO=bar     //无效
VUE_APP_SECRET=secret  有效

模式

模式是 Vue CLI 项目中一个重要的概念。默认情况下,一个 Vue CLI 项目有三个模式:

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

了解模式以后,我们可以为对应环境设置相应的环境变量,比如:

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

如果只需要在本地使用的话,可以在后面加入.local,比如 .env.local ,会git 忽略

在客户端侧代码中,可以使用 process.env.VUE_APP_* 获取应用

注:process.env.NODE_ENV,获取应用运行模式( "development" 、 "production" 或 "test" )

process.env.BASE_URL,应用基础路径( vue.config.js 中的 publicPath 选项)

ps:下面看下浅谈vue中环境变量和模式的作用

使用vue框架进行前端开发也有一段时间了,遇到的问题可以大致分为2类:开发问题,部署问题。

开发方面的问题是最多的,也是大家经常会遇到的,但是部署的问题也不容小觑,一旦部署出错会造成严重的上线事故。

开发和测试时调用后台接口的地址是和生产环境中不一样的,有些时候需要跳转到其他网页,也需要测试和生产环境跳转不同的页面。

这些配置如果都用人工来维护,上测试环境注释掉生产的代码,上生产环境注释掉测试的代码,会很麻烦也很容易出错。

所以有必要在一个入口进行控制,这就要用到vue框架中的环境变量和模式。

在vue-cli3构建的项目中,项目根目录下创建.env.[模式]文件可以定义一种模式,在这个文件中定义的变量就是对应模式的环境变量。

在本地启动项目默认是使用的development模式,使用build命令打包默认是使用的production模式。但是我们一般都会有一个测试环境,在我们打测试包和生产包的时候都是用的是production模式,所以需要定义一个环境变量来进行区分。

我目前的做法是创建.env.development,.env.test,.env.production三个模式文件。

每个模式文件中有3个环境变量:NODE_ENV(对应当前模式的名称),VUE_APP_RUNTIME_ENV(对应当前环境的名称),VUE_APP_BASE_URL(当前环境向后台发请求的baseurl)。

vue-cli3构建的项目中默认只有development模式和production模式,默认的NODE_ENV分别是development和production,很多配置也只依据NODE_ENV区分这2种模式,但是我们需要有3种模式。生产和测试的包应该是除了环江变量不同,其他都相同,所以同属production模式。用额外的VUE_APP_RUNTIME_ENV来区分production和test环境。

定义完成之后,在项目中使用process.env.VUE_APP_RUNTIME_ENV即可访问到变量的值。

package.json中也需要定义一条打测试包的命令:

"build-test": "vue-cli-service build --mode test"

表示打一个使用测试配置的身生产包。

标签:
vue环境变量,vue,模式

圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com