这篇文章主要为大家展示了什么是vue全局环境变量和模式,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。
我们可以在项目根目录中的下列文件来指定环境变量:
.env ,,,,,,,,,,,,,,#在所有的环境中被载入
.env.local ,,,,,,,,#在所有的环境中被载入,但会被git忽略
.env。(模式),,,,,,,,#只在指定的模式中被载入
.env。[模式].local ,#只在指定的模式中被载入,但会被git忽略一个环境文件只包含环境变量的“键=值”对,并且必须以<代码> VUE_APP 开始:
FOO=bar ,,,//无效
VUE_APP_SECRET=secret 有效<强>模式
模式是Vue CLI项目中一个重要的概念。默认情况下,一个Vue CLI <代码> 项目有三个模式:
<李>开发模式用于vue-cli-service服务 <李>生产模式用于vue-cli-service构建和vue-cli-service测试:e2e李 <李>测试模式用于vue-cli-service测试:单元
李,了解模式以后,我们可以为对应环境设置相应的环境变量,比如:
<李>为生产设置.env。李李生产 <>为发展设置.env.development李 <李> *为一个特定模式准备的环境文件(例如.env。生产)将会比一般的环境文件(例如.env)拥有更高的优先级李
如果只需要在本地使用的话,可以在后面加入。本地的,比如<代码> .env。当地>
在客户端侧代码中,可以使用<代码> process.env。VUE_APP_ * 获取应用
process.env。BASE_URL,应用基础路径(vue.config。js中的publicPath选项)
使用vue框架进行前端开发也有一段时间了,遇到的问题可以大致分为2类:开发问题,部署问题。
开发方面的问题是最多的,也是大家经常会遇到的,但是部署的问题也不容小觑,一旦部署出错会造成严重的上线事故。
开发和测试时调用后台接口的地址是和生产环境中不一样的,有些时候需要跳转到其他网页,也需要测试和生产环境跳转不同的页面。
这些配置如果都用人工来维护,上测试环境注释掉生产的代码,上生产环境注释掉测试的代码,会很麻烦也很容易出错。
所以有必要在一个入口进行控制,这就要用到vue框架中的环境变量和模式。
在vue-cli3构建的项目中,项目根目录下创建.env。[模式]文件可以定义一种模式,在这个文件中定义的变量就是对应模式的环境变量。
在本地启动项目默认是使用的开发模式,使用构建命令打包默认是使用的生产模式。但是我们一般都会有一个测试环境,在我们打测试包和生产包的时候都是用的是生产模式,所以需要定义一个环境变量来进行区分。
我目前的做法是创建,<代码> env.development .env.test, .env.production 三个模式文件。
每个模式文件中有3个环境变量:NODE_ENV(对应当前模式的名称),VUE_APP_RUNTIME_ENV(对应当前环境的名称),VUE_APP_BASE_URL(当前环境向后台发请求的baseurl)。
vue-cli3构建的项目中默认只有开发模式和生产模式,默认的NODE_ENV分别是开发和生产、很多配置也只依据NODE_ENV区分这两种模式,但是我们需要有3种模式。生产和测试的包应该是除了环江变量不同,其他都相同,所以同属生产模式。用额外的VUE_APP_RUNTIME_ENV来区分生产和测试环境。
定义完成之后,在项目中使用<代码> process.env.VUE_APP_RUNTIME_ENV>
package.json中也需要定义一条打测试包的命令:
“build-test":“vue-cli-service构建——模式test"
表示打一个使用测试配置的身生产包。
以上就是关于什么是vue全局环境变量和模式的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看的到。
什么是vue全局环境变量和模式
