在本地通過設置域名訪問vue項目時出現Invalid Host header錯誤

在本地通過設置域名訪問vue項目時出現Invalid Host header錯誤

原因：

webpack-dev-server出於安全考慮，默認檢查hostname，如果hostname不是配置內的就不能訪問，我們可以通過設置跳過host檢查來解決該報錯，具體如下：

解決方法：

1、vue-cli2創建的項目，在webpack.dev.conf.js中的devServer對象中添加如下設置：

// webpack.dev.conf.js
devServer: {
  disableHostCheck: true,
}

2、vue-cli3創建的項目，在項目根目錄下創建vue.config.js文件

// vue.config.js
module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

參考文獻：

[1] 解決vue項目中的“Invalid Host header”
[2] Invalid Host header 服務器域名訪問出現的問題