# 微信本地调试(以及vue提示: Invalid Host header)

# 一、修改host文件,把你的域名映射到本地,以下域名我以慕课网为例,注意更改

  1. windows下修改
    • 进入 C:\Windows\System32\drivers\etc, 打开 hosts 文件
    • 添加: 127.0.0.1 www.imooc.com
    • 保存修改,如下图所示
  2. mac
    • $ sudo vi /etc/hosts
    • 添加:127.0.0.1 www.imooc.com
    • 保存修改

# 二、 微信Web开发者工具中调试本地代码就可以了

# 注意:如果是vue项目并且提示 Invalid Host header

# 解决方法有三种, 原理都是一样,选择其一就可

  1. 在webpack.dev.conf.js 里面 devServer中添加: disableHostCheck: true,

    devServer: {
         disableHostCheck: true,
    }
    
    1
    2
    3
  2. 在config 修改host 改为 host: 'www.imooc.com'

  3. yarn serve --host www.imooc.com (注:其实就是运行vue-cli-service serve 该命令会启动一个开发服务器 基于 webpack-dev-server)

# 原理:

webpack-dev-server出于安全考虑,默认检查hostname,如果hostname不是配置内的,将中断访问

Last Updated: 11/18/2019, 9:43:45 AM