跟搭建本地服务：webpack-dev-server 有关

1.publicPath（常用）

2.contentBase

3.hotOnly

作用：当代码编译失败时，是否刷新整个页面。

  • 默认情况下：当代码打包编译失败修复后，我们会重新刷新整个页面；
  • 如果不希望重新刷新整个页面，可以设置 hotOnly: true 。

4.host

作用：用于设置主机地址。

  • 默认值：localhost；
  • 如果希望其它地方也可以访问，可以设置为 0.0.0.0。

localhost 和 0.0.0.0 的区别

1）localhost

localhost本质上是一个域名，通常情况下会被解析成127.0.0.1。
127.0.0.1 是一个回环地址（Loop Back Address），表达的意思是我们主机自己发出去的包，直接被自己接收。
正常的数据库包经过 应用层 - 传输层 - 网络层 - 数据链路层 - 物理层。而回环地址是在网络层直接就被获取到了，是不会经过数据链路层和物理层的。
比如：我们监听 127.0.0.1 的时候，在同一个网段下的主机中，通过ip地址是不能访问的。

2）0.0.0.0

监听IPV4上所有的地址，再根据端口找到不同的应用程序。
比如：我们监听 0.0.0.0 的时候，在同一个网段下的主机中，通过ip地址是可以访问的。

ip协议位于网络层

5.port

作用：用于设置监听的端口。

  • 默认值：8080。

6.open

作用：表示是否打开浏览器。

  • 默认值：false。
  • 如果设置为 true 的话，会打开浏览器。当然也可以设置为类似于Google Chrome等值。

7.compress

作用：是否为静态文件开启gzip compression。

  • 默认值：false。可以设置为true。

8.Proxy代理（常用）

作用：设置代理来解决跨域访问的问题。

举例说明

比如我们的一个api请求时http://localhost:8888，但是本地启动服务器的域名是http://localhost:8000，这个时候发送网络请求就会出现跨域问题。
那么，我们可以将请求先发送到一个代理服务器，代理服务器和API服务器是没有跨域的问题，就可以通过这种方式来解决我们的跨域问题了。

proxy中的属性值

1）target

target表示的是代理到的目标地址，比如 /api-hy/moment会被代理到 http://localhost:8888/api-hy/moment。

2）pathRewrite

默认情况下，我们的 /api-hy 也会被写入到URL中，如果希望删除，可以使用pathRewrite。

3）secure

默认情况下不接收转发到https的服务器上，如果希望支持，可以设置为false。

4）changeOrigin

表示是否更新代理后请求的headers中host地址。
changeOrigin其实是要修改代理请求中的headers中的host属性：

  • 因为我们真实的请求，其实是需要通过 http://localhost:8888来请求的；
  • 但是因为使用了代码，默认情况下它的值时 http://localhost:8000；
  • 如果我们需要修改，那么可以将changeOrigin设置为true即可。
    1. devServer: {
    2.   proxy: {
    3.     "/why": {
    4.       target: "http://localhost:8888",
    5.       pathRewrite: {
    6.         "^/why": ""
    7.       },
    8.       secure: false,
    9.       changeOrigin: true
    10.     }
    11.   }
    12. }

9.historyApiFallback（常用）

作用：解决SPA页面在路由跳转之后，进行页面刷新时，返回404的错误。

联想：vue-router 如果路由设置成history模式，会有问题的（即上面所述问题）。需要后端人员配合。

  • boolean值：默认是false，如果设置为true，那么在刷新时，返回404错误时，会自动返回index.html的内容；
  • object类型的值：可以配置rewrite属性，可以配置from来匹配路径，决定要跳转到哪一个页面。