推荐设备MORE

图标设计网站

图标设计网站

公司新闻

完全免费微信小程序_vue 全局环境切换问题

日期:2021-01-06
我要分享
vue 全局环境切换问题       小编在开发使经常会碰到全局切换问题,今天小编给大家带来一篇教程给大家介绍vue 全局环境切换问题,感兴趣的朋友一起看看吧

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

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

1.我们在utils中创建一个global.js文件

@Author: faith
全局常量对象
create by faith 
@return 全局常量对象
export function global() {
 const localGlobal = {
 PORTAL: '/ 前台
 CONSOLE: '/ 后台
 SHOP: '/ 店铺
 OSS_URL: '' // 图片地址
 const devGlobal = {
 PORTAL: '/ 前台
 CONSOLE: '/ 后台
 SHOP: '/ 店铺
 OSS_URL: '' // 图片地址
 const prodGlobal = {
 PORTAL: '/ 前台
 CONSOLE: '/ 后台
 SHOP: '/ 店铺
 OSS_URL: '' // 图片地址
 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" 

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

总结

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