|
需求：
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});--------------------- 作者：tom_wong666 来源：CSDN 原文：https://blog.csdn.net/tom_wong666/article/details/89763620 |
|
|
公众号
