详解vue-cli 接口代理配置

更新时间：2017年12月13日 15:45:39 作者：MaJing_CUI

本篇主要介绍了vue-cli 接口代理配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本文介绍了vue-cli 接口代理配置，分享给大家，具体如下：

一些同学在配置接口代理时，会有疑问我配置成功了为什么接口还是不通，其实代理已经成功只是接口访问地址规则没搞清楚

下面以本地测试为栗子向大家介绍

一些基本操作这里就不介绍了

找到vue-cli config 文件夹下的 index.js 这是是配置接口规则的文件同目录下建立 proxyConfig.js 一些同学习惯直接在原文件修改，也是可以但推荐使用新建文件的方式：

module.exports = {
  proxyList: {
    '/api': {
      target: 'http://localhost:3000',  （这里是代理接口的位置）
      changeOrigin: true,（允许跨域，如果这不写，调用接口接口时会有跨域错误说缺少请求头）
      pathRewrite: {'^/api': '' } （路由规则下面详细介绍）
    }
  }
}

******路由规则*******

上述代码执行之后，意思就是只要在接口中看到‘/api‘ 会自动变成我们设置的地址，那么我们在设置的时候可以规范接口书写标准就用到了这个属性 pathRewrite 路径重写{'^/api': '' } 是指你想让路由变成什么样子，如果是空那么在解析时如果我们的接口写的是 $http.get('/api/good') 那么在服务端我们将会看到 /good的访问，如果此时在服务端并没有相应的路由匹配，客服端就会显示报错，端口号还是客户端的端口号，所以很多同学就错觉没有起作用，同理如果我们设置{'^/api': '/api' } 那么在服务端将会看到/api/goods 的接口访问，意思就是不仅将/api自动解析成代理地址，还会作为服务端的路由展示。

另外在设置路由规则注意分隔符/ 有些同学喜欢这样写 target: 'http://localhost:3000/', 自己写端口后面加上一个分隔符，会发现路由对不上，这时你需要在命名的时候也要加上‘/' 路由规则也要加上‘/' 接口才能对，不然会发现请求接口的时候多了一个分隔符如：'/api//goods'。

设置完之后，在index.js 里面引入 proxyConfig.js，设置 proxyTable 完成设置

const proxyConfig = require('./proxyConfig')
module.exports = {
  dev: {
    env: require('./dev.env'),
    host: 'localhost',
    port: 8188,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: proxyConfig.proxyList,
    cssSourceMap: false,
  }
 }

请求时这样写

复制代码代码如下:

axios.get('/api/goods').then((res)=>{console.log(res.data);}}).catch((err)=>{console.log(err);}})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue3中导航守卫的使用教程
在Vue3中,导航守卫（Navigation Guards）用于在路由切换前后执行一些操作,例如验证用户权限、取消路由导航等,本文主要为大家介绍了vue3中导航守卫的使用方法,需要的可以参考下
2023-08-08
解决Vue不能检测数组或对象变动的问题
下面小编就为大家分享一篇解决Vue不能检测数组或对象变动的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
vue之将echart封装为组件
这篇文章主要介绍了vue之将echart封装为组件，本文将会以雷达图为案例，一步步讲解在vue项目中如何使用echart，如何将其封装为能重复调用的组件
2018-06-06
vue2导入使用vue-codemirror组件的教程详解
vue-codemirror是一个基于Vue的代码在线编辑器组件,它封装了CodeMirror编辑器,使得在Vue项目中可以方便地使用CodeMirror,下面我们就来看看vue-codemirror的具体使用吧
2024-02-02
VUE div click无效的问题及解决
这篇文章主要介绍了VUE div click无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
使用axios请求时,发送formData请求的示例
今天小编就为大家分享一篇使用axios请求时,发送formData请求的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
vue vue-touch移动端手势详解
这篇文章主要介绍了vue vue-touch移动端手势详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
Element中table组件(el-table)右侧滚动条空白占位处理
当我设置了max-height,就会在表格右侧出现一列空白的占位,本文主要介绍了Element中table组件(el-table)右侧滚动条空白占位处理,感兴趣的可以了解一下
2023-09-09
vue路由插件之vue-route
这篇文章主要介绍了vue路由插件之vue-route的相关知识，本文通过实例代码给大家介绍了vue router的使用，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-06-06
Vue3使用JSX的方法实例(笔记自用)
以前我们经常在react中使用jsx，现在我们在vue中也是用jsx,下面这篇文章主要给大家介绍了关于Vue3使用JSX的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02