原创声明
本文系作者辛苦码字所得,欢迎分享和转载,但请在明显位置注明作者的如下信息:
笔名:来碗鸡蛋面
简书主页:https://www.jianshu.com/u/4876275b5a73
邮箱:job_tom@foxmail.com
CSDN ID:tom_wong666
需求:
VUE开发前端项目,需要分环境配置URL和做相关处理
思路:通过process.env做判断和处理
实现一:环境区分
1,找到项目配置文件夹:
config文件夹
2,进入如下三个文件:
dev.env.js 对应开发环境
test.env.js 对应测试环境
prod.env.js 对应生产环境
找到如下代码:
// 开发环境
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
})
// 测试环境
module.exports = merge(devEnv, {
NODE_ENV: '"testing"',
})
// 生产环境
module.exports = {
NODE_ENV: '"production"',
}
3,你的NODE_ENV字段值不一定跟我一样,但是这个标记就是环境标识,我现在组件里面打印一下结果,给大家看下:
mounted() {
console.log(process.env.NODE_ENV);
// 打印结果
// 开发环境‘development’
// 测试环境‘testing’
// 生产环境‘production’
}
如果你想在组件中分环境处理相关方法,可以像这样用:
if(process.env.NODE_ENV === 'development') {
// 开发环境相关特殊方法
}
if(process.env.NODE_ENV === 'testing') {
// 测试环境相关特殊方法
}
if(process.env.NODE_ENV === 'production') {
// 生产环境相关特殊方法
}
实现二:分环境配置不同的URL HOST
1,基本实现思路:把不同环境的HOST配置在config对应环境的配置中,在main.js中往VUE组件的原型对象中添加baseURL属性,然后所有的组件都可以引用到;
2,代码实现:
(1),找到项目配置文件夹:
config文件夹
(2),进入如下三个文件:
dev.env.js 对应开发环境
test.env.js 对应测试环境
prod.env.js 对应生产环境
在如下代码中添加对应环境的HOST:
这里注意:
与普通script标签中的语法不同,这里如果是字符串是双层引号,如果是变量是单层引号!!!
// 开发环境
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_ROOT: '"开发环境host:wwww.baidu.com"',
})
// 测试环境
module.exports = merge(devEnv, {
NODE_ENV: '"testing"',
API_ROOT: '"测试环境host:wwww.baidu.com"',
})
// 生产环境
module.exports = {
NODE_ENV: '"production"',
API_ROOT: '"生产环境host:wwww.baidu.com"',
}
(3)在main.js中加入如下设置:
Object.defineProperties(Vue.prototype, {
// 注册不同环境的HOST为vue的原型对象属性,名称为baseURL
baseURL: {
value: process.env.API_ROOT,
writable: false
}
})
(4)在组件中使用:
const res = await this.$http.post(`${this.baseURL}/main.php?cid=${this.num});
网友评论