Vue实现proxy代理步骤详解

这次给大家带来Vue实现proxy代理步骤详解,Vue实现proxy代理的注意事项有哪些,下面就是实战案例,一起来看一下。

Vue 框架开发的时候,会遇到跨域的问题,可在config/index.js 里配置proxyTable内容,使用proxy 代理。

// config/index.js 文件proxyTable: {   '/api': {    target: 'http://192.168.149.90:8080/', // 设置你调用的接口域名和端口号    changeOrigin: true,   // 跨域    pathRewrite: {     '^/api': '/'         }   }  },

登录后复制

这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用’http://192.168.149.90:8080/xxx/duty?time=2017-07-07 14:57:22’,直接写‘/api/xxx/duty?time=2017-07-07 14:57:22’即可

在dev.env.js 里配置开发环境请求地址

// config/dev.env.js 文件module.exports = merge(prodEnv, { NODE_ENV: '"development"', ADMIN_SERVER: '"/api/"',});

登录后复制

若请求插件用的 axios,配置如下

const adminServer = axios.create({ baseURL: process.env.ADMIN_SERVER,});

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

实现vue多页面开发与打包步骤详解

vue之.sync修饰符使用详解

以上就是Vue实现proxy代理步骤详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2766896.html

(0)
上一篇 2025年3月8日 11:26:40
下一篇 2025年2月22日 23:35:21

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vue父组件往父组件内传递值步骤详解

    这次给大家带来vue父组件往父组件内传递值步骤详解,vue父组件往父组件内传递值的注意事项有哪些,下面就是实战案例,一起来看一下。 如下图所示: 当没有任何操作的时候父组件的值是 0 当点击加号以后父组件的值是 1 当点击减号以后父组件的值…

    2025年3月8日
    200
  • vue项目中api接口使用详解

    这次给大家带来vue项目中api接口使用详解,vue项目中api接口使用的注意事项有哪些,下面就是实战案例,一起来看一下。 默认vue项目中已经使用vue-cli生成,安装axios,基于element-ui开发,axiosconfig目录…

    编程技术 2025年3月8日
    200
  • vue数据传递实现步骤详解

    这次给大家带来vue数据传递实现步骤详解,vue数据传递实现的注意事项有哪些,下面就是实战案例,一起来看一下。 组件(Component)是 Vue.js 最强大的功能。组件可以封装可重用的代码,通过传入对象的不同,实现组件的复用,但组件传…

    2025年3月8日 编程技术
    200
  • vue全局与局部组件使用步骤详解

    这次给大家带来vue全局与局部组件使用步骤详解,vue全局与局部组件使用的注意事项有哪些,下面就是实战案例,一起来看一下。 main.js入口文件的一些常用配置, 在入口文件上定义的public.vue为全局组件,在这里用的是pug模版 .…

    编程技术 2025年3月8日
    200
  • JS实现文件拖拽步骤详解

    这次给大家带来JS实现文件拖拽步骤详解,JS实现文件拖拽的注意事项有哪些,下面就是实战案例,一起来看一下。 本文实例为大家分享了javascript实现文件拖拽事件的具体代码,供大家参考,具体内容如下 1.效果图: 2.源码 #p1 { w…

    2025年3月8日
    200
  • vue.js树形控件使用详解

    这次给大家带来vue.js树形控件使用详解,vue.js树形控件使用的注意事项有哪些,下面就是实战案例,一起来看一下。 实现原理 修改了element-ui源码,把源码里面的tree模块提取出来 然后修改element自带checkbox等…

    2025年3月8日
    200
  • Vue实现Observer步骤详解

    这次给大家带来Vue实现Observer步骤详解,Vue实现Observer的注意事项有哪些,下面就是实战案例,一起来看一下。 导语: 本文是对 Vue 官方文档深入响应式原理(https://cn.vuejs.org/v2/guide/r…

    2025年3月8日
    200
  • vue实现全选或反选案列详解

    这次给大家带来vue实现全选或反选案列详解,vue实现全选或反选的注意事项有哪些,下面就是实战案例,一起来看一下。 全选功能可以说是前端开发中非常常见的一个功能,以前的项目开发用jQuery开发比较多。最近在使用vue前端框架重构之前的项目…

    2025年3月8日
    200
  • Angular实现服务端渲染步骤详解

    这次给大家带来Angular实现服务端渲染步骤详解,Angular实现服务端渲染的注意事项有哪些,下面就是实战案例,一起来看一下。 Angular Universal Angular在服务端渲染方面提供一套前后端同构解决方案,它就是Angu…

    2025年3月8日 编程技术
    200
  • koa2实现文件上传下载步骤详解

    这次给大家带来koa2实现文件上传下载步骤详解,koa2实现文件上传下载的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 上传下载在 web 应用中还是比较常见的,无论是图片还是其他文件等。在 Koa 中,有很多中间件可以帮助我们快…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论