前端開發經常碰到切換環境的情況,
測試環境,開發環境,正式環境(以及圖片環境~~)
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">
每次打包之前切換環境,是不是既方便又快捷啊