vue中使用axios给生产环境和开发环境配置不同的baseUrl
Posted 我是豆子啊
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中使用axios给生产环境和开发环境配置不同的baseUrl相关的知识,希望对你有一定的参考价值。
第一步:设置不同的接口地址
找到文件:/config/dev.env.js
代码修改为:
var merge = require(‘webpack-merge‘) var prodEnv = require(‘./prod.env‘) module.exports = merge(prodEnv, { NODE_ENV: ‘"development"‘,
//添加 API_ROOT: ‘"//192.168.1.8/api"‘ })
/config/prod.env.js
代码修改为:
module.exports = { NODE_ENV: ‘"production"‘, //添加 API_ROOT: ‘"//www.baidu.com/api"‘ }
第二步:调用axios的文件下修改baseUrl
axios.defaults.baseURL = process.env.API_ROOT
最后重启项目:
这样在开发环境执行npm run dev 的时候,就调用的是
192.168.1.8/api
而在执行npm run build打包的时候则调用的是
www.baidu.com/api
以上是关于vue中使用axios给生产环境和开发环境配置不同的baseUrl的主要内容,如果未能解决你的问题,请参考以下文章
VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。