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

原文地址:https://www.cnblogs.com/woshidouzia/p/9299174.html

时间: 2024-08-29 14:35:45

vue中使用axios给生产环境和开发环境配置不同的baseUrl的相关文章

vue中采用axios发送post请求

这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在运用npm install axios的时候就会默认安装qs,因此我们就得将qs引入到axios中,然后需要再通过实例化一个新的axios,并且设置他的消息头为'content-type': 'application/x-www-form-urlencoded' 1 let qs = require

在vue中使用axios实现跨域请求并且设置返回的数据的格式是json格式,不是jsonp格式

在vue中使用axios实现跨域请求 需求分析:在项目中需要抓取qq音乐的歌曲列表的数据,由于要请求数据的地址url=https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg.从qq音乐的官网上可以看到该请求的请求头中的referer中的域名是y.qq.com(发送请求页面的域名),而host的域名是c.y.qq.com(被请求页面的域名),由于两者不一样,所以不能通过前端直接发送请求给qq服务器去拿数据.这时候需要服务器做一个代理

06 vue中使用axios跨域

本节将展示如果通过axios+proxyTable完成跨域请求并显示数据. 1.前提约束 完成nodejs,vue-cli,webpack,webpack-dev-server的安装 https://www.jianshu.com/p/eb4d9e132f62 2.操作步骤 完成vue项目中加入easytable[这时是固定数据] https://www.jianshu.com/p/bf5abb37eb3f 下载axios依赖包 cd vue-easytable cnpm install axi

Vs2012在Linux开发中的应用(1):开发环境

在Linux的开发过程中使用过多个IDE,code::blocks.eclipse.source insight.还有嵌入式厂商提供的各种IDE,如VisualDsp等,感觉总是不如vs强大好用.虽然VS并不提供gcc的编译和调试支持,在之前的开发中只能充当一个编辑器的作用,但VS提供了强大的SDK,本文将探讨如何扩展VS,使之支持Linux的开发. 其实像Visual Gdb之类的工具已经有了类似的功能,无非不免费而已,做这件事只有一个原因:好玩-- 1.1     开发环境 主机开发环境:

angular4的多环境(测试环境与开发环境,生产环境)

使生成项目可以多环境运行(测试环境与开发环境,生产环境) 这里对应的是不同的运行环境,随时通过上面的方式进行切换 同样着也可以用在部署环境上面..这个表式编译生成生产环境的微信号 原文地址:https://www.cnblogs.com/boonook/p/8689291.html

通过Maven配置测试环境和开发环境连接不同的数据库

通过Maven配置测试环境和开发环境连接不同的数据库 作者及来源: 通灵宝玉 - 博客园    收藏到→_→: 此文来自: 马开东博客 网址:http://www.makaidong.com 摘要: 通过Maven配置测试环境和开发环境连接不同的数据库 "通过Maven配置测试环境和开发环境连接不同的数据库":关键词:通过 maven 配置 测试 环境 开发 环境 连接 不同 其他数据库 通过maven配置测试环境和开发环境连接不同的其他数据库 操作上分3个步骤 1.在数据持久层的po

vue中使用axios最详细教程

前提条件:vue-cli 项目 安装: npm npm 在main.js导入: // 引入axios,并加到原型链中 import axios from 'axios'; Vue.prototype.$axios = axios; import QS from 'qs' Vue.prototype.qs = QS; 封装好的axios,拿走不送:(最好是在main.js同级目录创建一个 https.js 文件,复制粘贴下面代码,改 接口地址 就可以用) import axios from 'ax

记vue中封装axios

文件结构: mocks:中是本地json数据 adapter.js: 调用本地数据方法 resources.js 统一接口管理 export default { fetchDict: { url: '/v1/system/fetchDcType', method: 'post' } } 重点是以下俩个文件 index.js 拦截器以及请求头设置,并添加实例属性 import Vue from 'vue'; import axios from 'axios'; import { Toast } f

一个十分简单的、关于生产环境和开发环境的webpack配置

关于这个开发环境和生产环境的配置代码,之所有要分开是因为他们有些代码相同,有的又不同. 例如:开发模式下需要启动本地服务器,需要热重载,而生产模式不需要这些需要代码压缩.DefinePlugin等. 我们都是将两种环境都用用到的提取出来,放在一个公共.js文件.然后在相应的环境配置中使用  webpack-merge  将公共js合并进来. 我所了解到的配置思路,有两种: 方法一: 使用webpack-dev-server配置开发环境(这个简洁一些): 方法二: 使用webpack-dev-mi