vue - vue.config.js中devServer配置方式

 更新时间:2019年10月30日 10:05:44   作者:idomyway  
今天小编就为大家分享一篇vue - vue.config.js中devServer配置方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

前言

这里写你调用接口的基础路径,来解决跨域,如果设置了代理,那你本地开发环境的axios的baseUrl要写为'',即空字符串

只有一个接口ip端口时

devServer: {
  open: false,
  // 跨域
  proxy: {
   '/nuojinadm/': {
    target: 'http://192.168.0.11/',
    changeOrigin: true
   }
  }
 }

2、设置axios中的baseUrl 与proxy端口一致

baseUrl: {
  dev: '/nuojinadm/',
  pro: '/nuojinadm/'
 }

当有多个ip端口的接口时

devServer: {
  open: false,
  port: 8801, // 自定义修改8080端口
  // 代理跨域
  proxy: {
   '/proxy1/adm/': {
    target: 'http://192.168.0.xx:xxxx/',
    changeOrigin: true
   },
   '/proxy2/adm/': {
    target: 'http://192.168.0.xx:xxxx/',
    changeOrigin: true
   },
   '/httpsProxy3/config/': {
    target: 'https://xx.xx.com',
    secure: false, // https协议才设置
    changeOrigin: true
   }
  }
 }

2、设置axios中的baseUrl 设置为空

 baseUrl: {
  dev: '/',
  pro: '/'
 }

3、在每个request(axios)页面中

const proxyxxx= '/xxx/xxx'

export const getBannerList = params => {
 return axios.request({
  url: `${proxyxxx}/banner/v1/banner/${params.pageSize}/${params.pageNum}`,
  params,
  method: 'get'
 })
}

以上这篇vue - vue.config.js中devServer配置方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解Vue.js Mixins 混入使用

    详解Vue.js Mixins 混入使用

    本篇文章主要介绍了Vue.js Mixins 混入使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue封装组件之上传图片组件

    vue封装组件之上传图片组件

    这篇文章主要为大家详细介绍了vue封装组件之上传图片组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • Vue.js项目部署到服务器的详细步骤

    Vue.js项目部署到服务器的详细步骤

    这篇文章给大家介绍了Vue.js项目部署到服务器的详细步骤,既然是部署到服务器,肯定是需要一个云的。具体思路步骤大家可以参考下本文
    2017-07-07
  • vue中使用moment设置倒计时的方法

    vue中使用moment设置倒计时的方法

    这篇文章给大家介绍了vue中使用moment设置倒计时的方法,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-02-02
  • 一篇文章告诉你如何编写Vue插件

    一篇文章告诉你如何编写Vue插件

    这篇文章主要为大家介绍了如何编写Vue插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • Vue nextTick获取更新后的DOM的实现

    Vue nextTick获取更新后的DOM的实现

    本文主要介绍了Vue nextTick获取更新后的DOM的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • vue实现动态绑定行内样式style的backgroundImage

    vue实现动态绑定行内样式style的backgroundImage

    这篇文章主要介绍了vue实现动态绑定行内样式style的backgroundImage方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue实现跳转接口push 转场动画示例

    vue实现跳转接口push 转场动画示例

    今天小编就为大家分享一篇vue实现跳转接口push 转场动画示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue如何实现组件间通信

    Vue如何实现组件间通信

    组件间通信简单来说就是组件间进行数据传递。就像我们日常的打电话,就是通讯的一种方式,你把话说给我听,我把话说给你听,说的话就是数据。电话就是通讯方式的一种。无论是 Vue 还是 React ,都得进行组件间通信。
    2021-05-05
  • 优雅的将ElementUI表格变身成树形表格的方法步骤

    优雅的将ElementUI表格变身成树形表格的方法步骤

    这篇文章主要介绍了优雅的将ElementUI表格变身成树形表格的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论