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 全局环境切换问题,希望对大家有所帮助!
vue 全局环境切换问题
- Author -
lfaith声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@