跟搭建本地服务: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即可。
devServer: {
proxy: {
"/why": {
target: "http://localhost:8888",
pathRewrite: {
"^/why": ""
},
secure: false,
changeOrigin: true
}
}
}
9.historyApiFallback(常用)
作用:解决SPA页面在路由跳转之后,进行页面刷新时,返回404的错误。
联想:vue-router 如果路由设置成history模式,会有问题的(即上面所述问题)。需要后端人员配合。
- boolean值:默认是false,如果设置为true,那么在刷新时,返回404错误时,会自动返回index.html的内容;
- object类型的值:可以配置rewrite属性,可以配置from来匹配路径,决定要跳转到哪一个页面。