Mac修改hosts,域名与ip绑定,vue Invalid Host header

在移动开发过程中,有时候需要使用域名进行访问(如微信网页开发)本地ip地址服务,或者使用域名访问本地ip地址服务等。

这时候可以修改hosts进行实现。

1. 修改hosts文件

在命令终端,使用root用户修改hosts文件。域名使用root用户打开/etc/hosts host文件进行修改。添加
ip及对应的域名

$ sudo vi /etc/hosts
127.0.0.1       localhost
127.0.0.1       zhangguoyedeMacBook-Pro.local
255.255.255.255 broadcasthost
::1             localhost
::1             zhangguoyedeMacBook-Pro.local

# 在这里添加上ip及对应的域名并保存退出
#(这里假设你设置的是本机ip是 127.0.0.1 访问域名是 guoye.com)
127.0.0.1    guoye.com

2. 通过域名访问项目

现在可以在浏览器上访问你设置的域名guoye.com,跟直接通过ip访问127.0.0.1的内容是一致的。
通常你的项目会加上端口号,域名也需要加上端口号,如http://guoye.com:4201

3. vue (Invalid Host header)

在vue项目开发时,直接通过ip地址访问正常,但通过上面host域名方式访问,浏览器会显示一段文字:Invalid Host header
这是由于新版webpack-dev-server出于安全考虑,默认检查hostname,如果hostname 没有配置在内的,将中断访问。

解决方法:
vue.config.jsdevServer配置文件加上disableHostCheck: true

devServer: {
    port: 4201, // 端口配置
    proxy: {
    	// 代理配置
    },
    disableHostCheck: true, // 这是由于新版的webpack-dev-server出于安全考虑,默认检查hostname,如果hostname 不是配置内的,将中断访问。
}    

4. 手机端也通过域名进行访问

移动开发时,可以使用Charles软件进行代理。
此时手机端也能通过域名访问本机电脑的应用。
如何使用Charles,详情查看博客的相关文章。

你可能感兴趣的:(+Frontend,Practices/前端实战,+Operation/运维,高效使用Mac)