在移动开发过程中,有时候需要使用域名进行访问(如微信网页开发)本地 ip 地址服务,或者使用域名访问本地 ip 地址服务等。
这时候可以修改 host 进行实现。
1. 修改 host 文件
在命令终端,使用 root 用户修改 host 文件。域名使用 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.js
的devServer
配置文件加上 disableHostCheck: true
devServer: {
port: 4201, // 端口配置
proxy: {// 代理配置},
disableHostCheck: true, // 这是由于新版的 webpack-dev-server 出于安全考虑,默认检查 hostname,如果 hostname 不是配置内的,将中断访问。}
4. 手机端也通过域名进行访问
移动开发时,可以使用 Charles
软件进行代理。
此时手机端也能通过域名访问本机电脑的应用。
如何使用Charles
,详情查看博客的相关文章。