vue 在服务器端直接修改请求的接口地址

一个项目可能有很多环境，开发，测试，预生产，生产等环境，如果每一个环境都需要重新打包会显得比较麻烦，那么如何解决这个问题呢

在vue和uniapp中以及其他框架下的都是可以按照如下操作来解决的

在静态资源下新建一个env.json,vue项目是在public文件下新建，uniapp是在static下新建文件

文件格式如下

{
  "name": "development",
  "base": "/customer"
}

name，代表的是环境，方便直接在服务器上查看当前是什么环境的，base是请求的地址，如果服务器没有做代理的话，这里的base应该是完整的请求地址http:// xxxxx.com/customer，类似这种

一般人在处理的时候总是获取不到这个env.json里的地址，是因为，这里是因为异步导致的，如果要解决的话，可以在main.js或者是main.ts中如何操作

axios.get('./env.json')
 .then(function (res: any) {
  // handle success
　　　　Vue.prototype.BASE_URL = res.data.base;
  new Vue({
   router,
   store,
   render: h => h(App)
  }).$mount('#app')
 })

这样有个问题就是一定是在请求这个json成功之后项目才会开始渲染的，这个时间可以做一个加载动画，请求应该是很快的，如果请求失败，你可以在axios里做一个catch操作，给一个友好的提示什么的，进行重新请求

那么如何获取了？

可以在拦截器中进行获取然后拼接请求地址

在拦截器的那个js文件中

function getBaseUrl() {
  return Vue.prototype.BASE_URL
}

最后在传入url的时候进行拼接，如下
url: getBaseUrl() + opts.url, // opts是传过来的参数对象

就这样就可以正常请求了

一般开发环境下你env.json里可以配置你的开发地址，最后通过自动化打包部署到服务器上去之后，如果要换成其他环境(测试，预生产，生产)的地址,可以直接在服务器上直接修改这个env.json文件即可，

大功告成，哈哈

以上就是vue 在服务器端直接修改请求的接口地址的详细内容，更多关于vue 修改请求接口地址的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue配置多代理服务接口地址操作

    一.介绍 随着微服务架构的流行,后台项目逐渐被拆分成不同的模块进行通信,但是前端还是只有一个项目所以在访问不同模块后台时,需要请求不同的地址,在vue项目中,通过配置代理可以进行后端服务器接口地址访问,当需要访问不同微服务的后端接口时就需要配置不同的地址. 二.代码 config/index.js文件中配置代理地址: 自己项目中定义所有接口api管理文件src/api/getData.js: 页面调用接口时xxx.vue 三.总结 1.vue使用配置多代理地址方式可以访问不同的项目地址,使用以上

  • vue设置全局访问接口API地址操作

    在使用vue框架进行前后端分离项目开发时,通常涉及到与后段接口进行交互,平时一般使用比较多的就是用axios来实现调用后段接口,写法一般为 xxx() { const _this = this axios.get("http://ip:port/xx/xx").then(function (resp) { .....//省略 }) } 但是有一个比较普遍的问题就是,假如我们后端接口地址改变了,或者是网络地址发生了变化,就需要在上面IP以及端口的位置每一处都需要修改,所以我们需要一个一处

  • vue 接口请求地址前缀本地开发和线上开发设置方式

    开发环境 config/dev.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = require('./dev.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', API_ROOT: '"https://www.dev.com"' //本地请求前缀 }) 线上开发环境 config/pr

  • 如何修改Vue打包后文件的接口地址配置的方法

    1.背景 常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是对应的生产环境的地址,不是唯一的.如果每次都修改一个地址,再打包文件进行部署,过程繁琐且低效.那么如何把环境地址设置成可配置的,不需要再构建代码就能直接生效呢? 2.可选方案 进行了调研后,网上介绍的方案有2种: 1)在static上设置一个config.js,把配置的参数设置成 window 下的

  • 详解vue+axios给开发环境和生产环境配置不同的接口地址

    为什么要配置不同的接口地址 在开发过程中,前端请求访问的是自己本机启动的后台服务,此时涉及到跨域(因为端口不一样),所以在config/index.js文件中配置了代理 //检查某个文件是否存在 try { fs.statSync(path.join(__dirname, '../proxy/' + templatedir + '.json')) //如果可以执行到这里那么就表示存在了 console.log(124) proxyTable = require('../proxy/' + tem

  • webpack+vue-cil 中proxyTable配置接口地址代理操作

    在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包的时候,我们在本地启动服务器后,比如本地开发服务下是 http://localhost:8080 这样的访问页面,但是我们的接口地址是 http://xxxx.com/save/index 这样的接口地址,我们这样直接使用会存在跨域的请求,导致接口请求不成功,因此我们需要在打包的时候配置一下,我们进入 config/index.js 代码下如下配置即可: dev: {

  • Vue proxyTable配置多个接口地址,解决跨域的问题

    最开始的时候,因为请求后台出现跨域问题. 查找资料配置proxyTable,解决跨域问题.如下图所示: axios请求页面: this.$axios.post('/api/weblogin/login',data).then(res=>{ console.log(res) }) 后面遇到需要连接不同的接口域名,我在proxyTable里增加了一个apiGas.axios请求存在获取得到api但是不能获取apiGas(提示请求资源不存在). proxyTable: { '/api': { targ

  • vue axios 给生产环境和发布环境配置不同的接口地址(推荐)

    本项目是vue-cli搭建的项目框架,引入axios用于数据请求.配置不同的接口地址,(首先确保已经集成了axios,如对集成axios有疑问的道友,可参看我之间的一篇vue-cli 引入axios)操作如下 一.设置不同的接口地址 找到如下文件 /config/dev.env.js /config/prod.env.js 之后增加接口地址域名配置,增加后的文件内容如下 二.在自己重新封装的axios文件中(api/api.js),将配置好的接口地址作为baseURL拼接到接口路径中 详细的ap

  • vue 在服务器端直接修改请求的接口地址

    一个项目可能有很多环境,开发,测试,预生产,生产等环境,如果每一个环境都需要重新打包会显得比较麻烦,那么如何解决这个问题呢 在vue和uniapp中以及其他框架下的都是可以按照如下操作来解决的 在静态资源下新建一个env.json,vue项目是在public文件下新建,uniapp是在static下新建文件 文件格式如下 { "name": "development", "base": "/customer" } name,代

  • 解决vue中无法动态修改jqgrid组件 url地址的问题

    在项目开发中使用封装的jqgrid组件时需要动态修改URL地址,直接修改URL地址jqgrid请求的url地址并不会改变,这时我们可以强行修改jqgrid的url地址,修改如下: $("#accountGrid").setGridParam( //G,P要大写 { url:UrlService.url('www/1') } ) .trigger("reloadGrid"); 以上这篇解决vue中无法动态修改jqgrid组件 url地址的问题就是小编分享给大家的全部内

  • Vue项目打包后可修改基础接口地址配置的具体操作

    Vue项目打包后可修改基础接口地址配置的具体操作

    目录 一.目的 二.具体操作实现 总结 一.目的 最近在学习或工作中遇到,把 Vue 前端项目打包后,要求可以再次修改请求后端接口的基础地址.平常开发中在 Vue 项目中使用 axios 时把请求后端接口的基础地址写在了 baseURL 里. 这样子打包后如果要改图里红框处的地址,要么去打包编译后的文件堆里一个个搜索(如果项目不小的话,这文件堆可不少...),找到后直接改,要么在源码里改完后重新再打包部署,这两种做法都显得有些麻烦,且维护性也不好. 所以本文用一种较好的方案来解决以上问题,通过创

  • vue输入节流,避免实时请求接口的实例代码

    在做搜索的时候,当搜索页面只有一个输入框.没有确定按钮的时候,只能在用户输入时请求服务端,查询数据.这样会导致频繁的发送请求,造成服务端压力. 解决这个问题,可以使用vue做输入节流. 1.创建一个工具类,debounce.js /*** * @param func 输入完成的回调函数 * @param delay 延迟时间 */ export function debounce(func, delay) { let timer return (...args) => { if (timer)

  • Vue请求后端接口导出excel表格方式

    Vue请求后端接口导出excel表格方式

    目录 vue请求后端接口导出excel 调用后端接口导出excel无效果,直接访问后端url可以 controller层代码 serviceImpl代码 导出模板路径 工具箱代码 vue前端写法 vue请求后端接口导出excel 项目中遇到一个需求,用户下载文件,会从后端那里请求接口获得数据并下载导出excel表格 后端小哥给我返回的是二进制数据流,需要前端自己去处理这些数据 如下图,请求接口返回的数据都是乱码 这里我们可以在axios的请求里添加,这样返回的二进制数据就会被读取为Blob的数据

  • Vue实现让页面加载时请求后台接口数据

    目录 让页面加载时请求后台接口数据 Vue请求后台数据几种方式 1.vue-resource官方提供的vue的一个插件 2.axios的使用 3.fetch-jsonp不受跨域限制 让页面加载时请求后台接口数据 <template>   <div class="hello">     <div>       {{title}}     </div>     <hr>     <button @click="co

  • 详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper

    1.vue-cli 构建项目 //全局安装 vue-cli npm install - g vue- cli //创建一个基于 webpack 模板的新项目 vue init webpack my- project //cd 进入刚新建的项目文件(my-project) cd my- project // 运行 npm run dev 2.vue-cli 使用axios //1.先安装axios npm install axios //2.main.js中引入并放在Vue的原型上 import

  • vue中Axios的封装与API接口的管理详解

    vue中Axios的封装与API接口的管理详解

    如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题,我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等.所以我们的尤大大也是果断放弃了对其官方库vue-reso

随机推荐