vue 全局环境切换问题


Posted in Javascript onOctober 27, 2019

前端开发经常碰到切换环境的情况,

测试环境,开发环境,正式环境(以及图片环境~~)

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.域名.com:9528', // 后台
   SHOP: 'http://test.域名.com:1025', // 店铺
   OSS_URL: 'https://devsfile.oss-cn-beijing.aliyuncs.com/' // 图片地址
  }
 const devGlobal = {
  PORTAL: 'https://dev.域名.com', // 前台
  CONSOLE: 'https://dev.console.域名.com', // 后台
  SHOP: 'https://dev.shop.域名.com', // 店铺
  OSS_URL: 'https://devsfile.oss-cn-beijing.aliyuncs.com/' // 图片地址
 }
  const prodGlobal = {
   PORTAL: 'https://www.域名.com', // 前台
   CONSOLE: 'https://console.域名.com', // 后台
   SHOP: 'https://shop.域名.com', // 店铺
   OSS_URL: 'https://ycsfile.oss-cn-beijing.aliyuncs.com/' // 图片地址
  }
 return devGlobal
}

2.main.js中使用

import { global } from './utils/global'
Vue.prototype.$global = global()
3.vue 页面中使用img地址
data() {
 return {
  ossUrl: this.$global.OSS_URL,
 }
},

4.Dom 结构

<img :src="ossUrl+后台传输url" class="avatar">

每次打包之前切换环境,是不是既方便又快捷啊

总结

以上所述是小编给大家介绍的vue 全局环境切换问题,希望对大家有所帮助!

Javascript 相关文章推荐
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
js调试工具Console命令详解
Oct 21 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
JavaScript 中的12种循环遍历方法【总结】
May 31 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
javascript读取本地文件和目录方法详解
Aug 06 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 #Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 #Javascript
Vue-Cli项目优化操作的实现
Oct 27 #Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 #Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 #Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 #Javascript
vue-router的钩子函数用法实例分析
Oct 26 #Javascript
You might like
php实现的Cookies操作类实例
2014/09/24 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
解密效果
2006/06/23 Javascript
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
js中Generator函数的深入讲解
2019/04/07 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
Python定时执行之Timer用法示例
2015/05/27 Python
python实现Floyd算法
2018/01/03 Python
python实现微信自动回复功能
2018/04/11 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
《再别康桥》教学反思
2014/02/12 职场文书
11月升旗仪式讲话稿
2014/02/15 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
党员自我评价2015
2015/03/03 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
Nginx快速入门教程
2021/03/31 Servers
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL