vue之代理配置devServer（vue.config.js）片段

本文主要是介绍vue之代理配置devServer（vue.config.js）片段，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

关于vue.config.js的部分配置解析：首先看下面一段配置

devServer: {

    open: process.platform === 'darwin',//true or false （true则启动项目自动打开系统自带浏览器）

    host: '0.0.0.0', // 配置devServer服务监听的地址  比如：想让局域网内的其他用户访问自己的设备，可以将host配置为自己本机的IP地址

    port: 8080,端口号，默认是8080，启动项目的时候，如果被占用就换成8081等其他数字都行

    before: app => {},

    // 配置vue代理进行跨域

    proxy: { // 接口配置代理，解决本地调用跨域

     '/proxy': {

        target: 'http://xx.xx.xx:8080/xxx/hhh', // 代理某环境地址

        secure: false, // false为http访问，true为https访问

        changeOrigin: true, // 跨域访问设置，true代表跨域

        pathRewrite: { // 路径改写规则

          '^/proxy': '/' // 以“^/xxx”为开头的改写为''/xxx

        }

      }

      }

    }

  }

关于部分配置说明：

open: process.platform === 'darwin',作用：true则启动项目后自动打开系统默认浏览器，反之不打开

//这里没什么特殊情况就true就好了。上面之所以这样写，是苹果电脑系统判断有的时候会这样写。

 pathRewrite 如果不想始终传递 /proxy，则需要重写路径： '^/proxy': '/' 将proxy替换为斜杠

这篇关于vue之代理配置devServer（vue.config.js）片段的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---