vue生产环境和开发环境配置不同的api地址
vue生产环境和开发环境配置不同的api地址用vue-cli构建的项目中,有两个文件是用来区分生产环境和开发环境的。/config/dev.env.js/config/prod.env.js在main.js中可以得到当前的开发环境:var env = process.env.NODE_ENV;所以根据不同的环境配置不同的api,其中我有两个存放不同api地址的jso...
·
vue生产环境和开发环境配置不同的api地址
用vue-cli2构建的项目中,有两个文件是用来区分生产环境和开发环境的。
/config/dev.env.js
/config/prod.env.js
在main.js中可以得到当前的开发环境:
var env = process.env.NODE_ENV;
所以根据不同的环境配置不同的api,
其中我有两个存放不同api地址的json文件。因为我用的api地址有多个,所以放在json文件里统一管理。
在main.js文件中引入两个JSON文件。
import apiConfigProd from '../static/apiConfigProd.json'
import apiConfigDev from '../static/apiConfigDev.json'
我的apiConfigDev.json
{
"api": "apiDevUrl",
"api2": "apiDev2Url",
"websocketUrl":: "ws://......"
}
我的apiConfigProd.json:
{
"api": "apiProdUrl",
"api2": "apiProd2Url",
"websocketUrl":: "wss://......"
}
其中apiConfigProd是生产环境的api地址,apiConfigDev是开发环境的api地址。并且两个josn文件中的key命名一样,方便在代码中使用。
然后,在main.js中添加如下代码:
development是开发环境,production是生产环境。这里我用的是axios, Vue.prototype.apiConfig是vue的全局属性
var env = process.env.NODE_ENV;
if (env == 'development') {
axios.defaults.baseURL = apiConfigDev.api
Vue.prototype.apiConfig = apiConfigDev
} else if (env == 'production') {
axios.defaults.baseURL = apiConfigProd.api
Vue.prototype.apiConfig = apiConfigProd
}
然后在组件中使用,可直接打出log,查看当前的api地址:
console.log(this.apiConfig)
使用哪个地址就直接点哪个,this.apiConfig.api2
this.axios.get(this.apiConfig.api2, {
params: {
id: 12345
}
})
.then(()=>{})
vue打包的时候,peocess.env.NODE_ENV默认是‘production’。会自动加载生产环境的api地址。
更多推荐
已为社区贡献18条内容
所有评论(0)