vue-cli项目的外网访问

3,385 阅读1分钟

vue-cli创建项目通过webpack打包,然后nodejs作为WebServer启动调试
但是当前的打包后进行调试(yarn dev,或者说vue-cli-service serve),出于安全考虑,会只允许某些域名访问,包括本地的localhost, 和局域网内的192.168.1.xxx之类,否则会提示'Invalid Host header',也就是一种白名单机制
如果启用外网访问,需要修改vue.config.js

module.exports = {
    devServer: {
        host:'0.0.0.0',
        disableHostCheck: true,
    }
}

其中host:'0.0.0.0'是为了将监听地址扩展为任意地址
disableHostCheck:true是为了关闭webpack的host白名单
有些文章说是修改webpack的配置文件,猜测是原本使用webpack的配置文件,新的vue-cli将对应配置整合到vue.config.js里去了