深入浅析vue全局环境变量和模式

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

.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全局环境变量和模式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue-cli3.0 环境变量与模式配置方法

    vue-cli3.0移除了配置文件目录: config和build文件夹.可以说是非常的精简了,那移除了配置文件目录后如何自定义配置环境变量和模式呢? 为什么需要配置环境变量和模式呢? 所有方法肯定是来源于现实的需求.在一个产品的前端开发过程中,一般来说会经历本地开发.测试脚本.开发自测.测试环境.预上线环境,然后才能正式的发布.对应每一个环境可能都会有所差异,比如说服务器地址.接口地址.websorket地址-- 等等.在各个环境切换的时候,就需要不同的配置参数,所以就可以用环境变量和模式,来

  • vue-cli配置环境变量的方法

    在实际项目开发中,经常会碰到需要环境变量的情景,在vue-cli的环境下,默认已经配置了一个NODE_ENV的环境变量,当npm run dev的时候这个是development, 当npm run build 的时候这个是production.用过vue-cli开发的通常对这个都不陌生,用这个最多的基本就是我们配置ajax请求的域名头了, if (process.env.NODE_ENV === 'production') { axios.defaults.baseURL = 'http://

  • vue项目环境变量配置的实现方法

    问题 实际开发中,开发环境和生产环境中一些变量是不同的,比如接口地址等等,打包之前需要手动切换. 编译时 新建env.js let baseUrl = ''; if(process.env.NODE_ENV == 'production'){ baseUrl = 'https://xxxxxxxxx'; } else if (process.env.NODE_ENV == 'development') { baseUrl = '/api' } export { baseUrl } process

  • vue-cli3添加模式配置多环境变量的方法

    vue-cli3配置多环境变量 先挂官网描述:环境变量和模式 需求 根据运行环境判断执行代码: 预发环境操作完成跳转地址与线上环境跳转地址不同 线上环境添加埋点脚本 实现 Step1:在项目根目录中新建.env.uat .env.uat配置如下: VUE_APP_BUILD_TYPE=uat vue-cli中规定,只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中. 代码中可以通过 process.env.VUE_APP_SECRET 这

  • vue cli4下环境变量和模式示例详解

    本文介绍了vue cli4下环境变量和模式示例详解,分享给大家,具体如下: 官方文档 环境变量 一个环境变量文件只包含环境变量的键值对: NODE_ENV=development VUE_APP_BASE_URL=http://127.0.0.1:8080/ 注意: NODE_ENV - 是 "development"."production" ."test"或者自定义的值.具体的值取决于应用运行的模式 BASE_URL - 会和 vue.con

  • 深入浅析vue全局环境变量和模式

    我们可以在项目根目录中的下列文件来指定环境变量: .env                # 在所有的环境中被载入 .env.local          # 在所有的环境中被载入,但会被 git 忽略 .env.[mode]         # 只在指定的模式中被载入 .env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略 一个环境文件只包含环境变量的"键=值"对,并且必须以VUE_APP开始: FOO=bar     //无效 VUE_APP_SE

  • 关于vue设置环境变量全流程

    目录 vue设置环境变量 创建不同环境变量文件 给.env文件添加内容 在package.json中添加不同环境对应的执行语句 使用 多环境变量 什么是多环境变量? 配置流程 vue设置环境变量 在开发的时候一般会有是三个环境:开发环境 测试环境 线上环境 vue 中有个概念就是模式,默认先vue cli 有三个模式 development模式用于 vue-cli-service serve production模式用于 vue-cli-service build 和 vue-cli-servi

  • vue 全局环境切换问题

    前端开发经常碰到切换环境的情况, 测试环境,开发环境,正式环境(以及图片环境~~) 1.我们在utils中创建一个global.js文件 /** @Author: faith 全局常量对象 create by faith 2019-10-23 @return 全局常量对象 * export function global() { const localGlobal = { PORTAL: 'http://test.域名.com:1024', // 前台 CONSOLE: 'http://test

  • nodeJs的安装与npm全局环境变量的配置详解

    最近在做小程序开发时,有用到云函数,而云函数就是用node.js写的,所以其中难免会用到一些node类库.用node类库就必选在电脑上安装node.js环境,并且配置npm命令的环境变量.用mac电脑,这些基本上都是自带的,不用安装和配置.但是大多数同学都是window电脑,所以今天就来教大家如何在window电脑上安装node.js并且配置npm命令 一,下载node包 这里推荐大家直接到官网下载:https://nodejs.org/zh-cn/download/ 二,安装node包 1,下

  • npm全局环境变量配置详解

    我们要先配置npm的全局模块的存放路径以及cache的路径,例如我希望将以上两个文件夹放在nodejs的主目录下,便在nodejs下建立"node_global"及"node_cache"两个文件夹.如下图: 然后,在cmd里面输入下面的命令行,来设置npm存放模块的路径,修改成自己的目录: npm config set prefix "E:\software\nodejs\node_global" npm config set cache &q

  • 深入浅析Vue全局组件与局部组件的区别

    1.组件声明 <!-- 全局组件模板father模板 --> <template id="father"> <div> <h3>这是{{name}}</h1> <div> <p>这是{{data}}</p> </div> </div> </template> var FATHER = { template: "#father", dat

  • vue项目使用.env文件配置全局环境变量的方法

    关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件 .env 全局默认配置文件,不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env.production 生产环境下的配置文件 关于文件内容: 注意:属性名必须以VUE_APP_开头,比如VUE_APP_XXX .env: .env.development: 关于文件的加载: 根据启动命令vue会自动加载对应的环境,vue是根据文件名进行加载的,所以上面说"不要乱起名,也无需专门控制加

随机推荐