一、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': '/'}}}
比如项目上的配置，本地开发时实际上接口请求是 :8080/api/getUser，path 的 /api 匹配上面的配置就会转发及重写为 http://emcs-app:8080/getUser 这样请求到后台服务去
如果觉得《浅析vue cli的webpack配置属性 devServer 详解 和 devServer.proxy 工作原理解析》对你有帮助，请点赞、收藏，并留下你的观点哦！
