浅析vue cli4的webpack配置属性 devServer 详解 和 devServer.proxy 工作原理解析

一、devServer

1、作用：通过devServer，可以在NodeJS架设起临时的服务器用于项目的运行与调试。

module.exports = {
  // webpack-dev-server 相关配置
  devServer: {
    open: true,
    inline: true,
    host: '0.0.0.0', // 允许外部ip访问
    port: 8080, // 端口
    https: false, // 启用https
  }
}

2、inline：Default: true，作用：用于设置代码保存时是否自动刷新页面。

3、hot：Default: true，作用：用于设置代码保存时是否进行热更新（局部刷新，不刷新整个页面）

4、open：Default: false，作用：用于设置 server 启动后是否自动打开浏览器

5、openPage：Type: string，作用: 指定 deserver 编译完成后自动打开的页面

　　注意：需要配合 open 来使用，如果Vue router 为 hash mode，应在url前面补上 /#，如：openPage: '/#/about'

6、https：Default: false，用于设置是否启用https

7、port：Type: number，指定要监听请求的端口号

8、host：Default: localhost，用于指定devDerve使用的host，如果你希望服务器外部可以访问，设定为 host: '0.0.0.0'

9、compress；Type: boolean，对 devServer 所有服务启用 gzip 压缩

11、headers：Type: object，在所有响应中添加首部内容

module.exports = {
  devServer: {
    headers: {
      'X-Custom-Foo': 'bar'
    }
  }
};

12、overlay

• Type: booleanobject: { boolean errors, boolean warnings }

• 作用：当出现编译器错误或警告时，在浏览器中显示全屏覆盖层。默认禁用。

// 其一：显示编译器错误
module.exports = {
  devServer: {
    overlay: true
  }
};
// 其二：示警告和错误
module.exports = {
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    }
  }
};

13、proxy：设置API访问代理，其常用 options （属性）如下

　　target：代理的服务器，也就是api要访问的服务器

　　ws：true，是否代理 websocket

　　secure：false，是否使用HTTPS协议。默认 false

　　changeOrigin：true，将主机头的来源更改为目标URL，也就是是否允许跨域

　　pathRewrite：重写 url 的 path 部分

二、devServer.proxy 的工作原理

1、proxy 接受一个对象，对象键值对的 key 用来匹配 api 的 url 中的 path。也就是说，当我们进行如下配置时：

module.exports = {
　　proxy: {
　　　　'/api': {
　　　　　　target: 'http://127.0.0.10:3000',
　　　　}
　　}
};

　　devServer 会自动对 path 为 /api 开头的 api 做代理转发。而 path 不是 /api 开头的就不会进行处理。

　　这里需要注意一下 path 与 url 的区别，path 是取 url 里的一部分

2、pathRewrite 属性讲解

　　pathRewrite 接受一个对象。

（1）key：对象键值对中的 key 是一个正则表达式。这里需要注意正则的写法，必须与^开头。熟悉正则表达式的朋友就会知道，这表明，传给 deveServer.proxy 的 api 的 url 必须是以正则表达式所要匹配的字符串开头。

例如：如下配置 pathRewrite: {"^/api" : ""}

现在这样两个 api：http://localhost:80/api/login 和 /api/login，devServe.proxy 匹配哪个？

会匹配第二个，因为第二个以/api开头，而第一个以http开头。

（2）value：对象键的 value 是个字符串，用来替换 key 匹配的字符串

3、pathRewrite 替换的结果

　　有了上面的知识，那我们就可以明白 pathRewrite 的工作原理以及结果是什么

proxy: {
　　'/api': {
　　　　target: 'http://emcs-app:8080/',
　　　　changeOrigin: true,
　　　　pathRewrite: {
　　　　　　'^/api': '/'
　　　　}
　　}
}

　　比如项目上的配置，本地开发时实际上接口请求是 http://test.modb.cc:8080/api/getUser，path 的 /api 匹配上面的配置就会转发及重写为 http://emcs-app:8080/getUser 这样请求到后台服务去