木灵鱼儿
阅读:1081
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-i18n 的使用方式
安装vue2版需要安装8.x版本的,9.x的是vue3版本使用上大同小异。vue2安装:yarn add vue-i18n@8vue3安装:yarn add vue-i18n封装官方虽然支持很不错的用法,但是自定义处理是难免的。vue3文件目录结构├─ src │ ├─ language │ │ ├─ lang │ │ │ ├─ en.json │ │ │ └─ zh.json │ │ ├─ core │ │ │ ├─ i18n.ts │ │ │ ├─ customization.ts │ │ │ └─ language.ts │ │ ├─ i...
vue router 一个重定向页面的思路
当项目需要和其他项目进行沟通的时候,往往常见的做法就是,我在a网站点击一个按钮,在链接中携带query参数啥的,然后去访问b网站页面。此时可能会有两种情况:跳转的链接就是b网站的具体链接地址。跳转的链接是b网站的一个跳板,跳板会对参数做一些操作,然后进行重定向。两种做法都各有优势:第一种省事简单,但是如果以后b网站链接层级发生变化,那么就会导致链接不可能,到时候还需要进行修改,很痛苦。第二种的话,我们需要写一个跳板页面,但是通过一些参数要求,甚至自身加上一些逻辑处理,那么他的功能性会更强一些。那么,在vue中,做一个重定向页面,怎么做?思路思路1利用路由守卫,当链接上存在某个参数的时候,...
vue 过滤器 驼峰与短横线相互转换的方法
自己去注册吧,提供的是es6导出的方法//短横线转驼峰 export const dashToHump = function (value) { const textArr = value.split("-"); return textArr.map((item, index) => { if (index === 0) return item.toLowerCase(); return item.slice(0, 1).toUpperCase() + item.slice(1); }) .join("")...
使用vue.draggable拖拽组件遇到的一些问题
资源github:vue.draggable中文文档:vue.draggable中文文档api参考文档:sortablejsvue.draggable是基于sortablejs的vue封装,所有有些api官方并不会有过多的解释,可以去sortablejs查看下拖拽无法触发页面滚动当拖拽的内容大于页面宽高时,页面滚动就是一个必然的需求,但是vue.draggable默认情况并不能触发滚动。官方设置里有一个属性:scroll,如果为true时就能触发滚动,但是默认属性就是true;所以这个配置可以说是无效的。解决方案:cannot set scrollSensitivity19年的时候就有提...

关于 element table多选里面实现单选的偷懒做法
在elment的table多选中增加单选逻辑,这个也不能说产品的问题,单选和多选应该算是比较基础的应用,但是,element并没有对单选做支持。于是我有了一个偷懒思路!前提由于table的一键全选按钮无法进行细致化操作,无法控制点击时选中的数量,只能在选中后的回调里面处理,所以,我的做法是单选时隐藏这个按钮。 selectable方法可以返回布尔值来表示当前格子是否允许勾选或者取消,其实就是禁用的意思。<el-table-column type="selection" :selectable="onSelectable"></el...

关于element el-input 输入的值需要转number的问题
前言经常是一个input表单需要输入数字和小数,那么如果仅仅是要求数据格式,我们可以通过表单校验的方式对输入的值进行限制,具体的做法,我之前就写过文章:《element input表单验证数字类型方法大全》里面有关于数字类型校验的方式,基本涵盖了日常需求。但是,仅仅就只能这样吗???no,如果后端要求你输入的数字,提交给他的时候也必须是数字类型呢?要知道,即便我们做了表单校验,校验它输入的必须是数字格式,但是input本身就是一个string类型的值,即便你设置type="number"也无法改变它值的类型。有人说用.number;其实这个问题之前就聊过了,这个修饰符...
关于element table合并格子的思路
效果图需要将第一个col值相同的格子row进行合并。实现element的表格提供了一个span-method方法,该方法会为每个格子运行一次。比如,有一个3行的表格,每行4个格子,那么span-method就会运行:3*4=12;共计12次。有时候我们并不需要每个格子都运行一次,在上面的需求上,我们只需要每行运行一次就行了,所以我们可以通过span-method的参数中,解构出columnIndex每行每个格子的下标。<script> export default { methods: { spanMethod({columnIndex}) { if(...

.native修饰符 做了什么
估计也就只有我这个憨憨一直以为native会自动将事件传给组件的input那些元素,比如按键事件啊,点击事件啊。然后,我就一直很好奇,他是怎么做到准确绑定的?然而事实上,他就是一次事件的绑定而已。<base-input v-on:focus="onFocus"></base-input>base-input<template> <div class="input-item"> <input type="text"> </div> </t...
实现一个点击自动滚动到指定元素,并让input元素聚焦
效果图思路分析tab切换在vue中,tab的切换只需要改动tab组件的active属性即可,所以,我们只需要对点击的元素,点击后能提供一个它奴属于哪个tab选中项即可。具体就看自己的代码怎么设计,比如html元素可以使用data属性。聚焦聚焦就很简单了,input元素有focus方法,运行就会聚焦。滑动定位利用scrollIntoView方法,可以达到定位的效果,配置属性,就会有动画。element.scrollIntoView({behavior:"smooth"})MDN:Element.scrollIntoView()点击这个元素,从data属性上获取要滚动的元...

分享一个vscode的配置 vue开发用的
安装的插件Atom One Dark Theme 主题Auto Rename Tag 头尾标签自动修改,改一个改一双Beautify 格式化Bracket Pair Colorizer 对象括号选择有颜色表示范围Highlight Matching Tag 选择标签自动高亮对应的结尾标签Material Icon Theme 图标Path Intellisense 路径提示,只能相对路径Version Lens 版本提示,安装完可以在打开package.json文件,在右上角有一个v按钮,点击可以查看最新版本,更新狂魔必备Vetur 用了vue还有不装这个的?Color Hig...