共计 922 个字符,预计需要花费 3 分钟才能阅读完成。
前端开发经常碰到切换环境的情况,
测试环境,开发环境,正式环境(以及图片环境~~)
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">
每次打包之前切换环境,是不是既方便又快捷啊
正文完
发表至:无分类
2019-10-23