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 相关文章推荐
学习ExtJS fit布局使用说明
Oct 08 Javascript
JQuery下的Live方法和$.browser方法使用代码
Jun 02 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
JavaScript实现随机点名器实例详解
May 07 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函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
php中require和require_once的区别说明
2014/02/27 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
几个javascript操作word的参考代码
2009/10/26 Javascript
jQuery 自定义函数写法分享
2012/03/30 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
python采集博客中上传的QQ截图文件
2014/07/18 Python
python读取Excel表格文件的方法
2019/09/02 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
优秀实习自我鉴定
2013/12/04 职场文书
优良学风班总结材料
2014/02/08 职场文书
项目经理任命书范本
2014/06/05 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
与美同行演讲稿
2014/09/13 职场文书
nginx常用配置conf的示例代码详解
2022/03/21 Servers