解决内网穿透时访问vue项目时，页面报“Invalid Host header”

解决Invalid Host header的方案

在 vue-cli 版本为 2.x 的情况下：

修改 webpack.dev.conf.js 中的 devServer 对象加入 disableHostCheck: true

  devServer: {
    disableHostCheck: true,
  }

vue-cli 版本 3.0 的情况下：

修改 vue.config.js 的配置

第一种

  module.exports = {
    devServer: {
      disableHostCheck: true
    }
  }

第二种

修改 vue.config.js 的配置

devServer: {
    allowedHosts: 'all',
}

说明：我的是通过第二种解决的

修改前的vue.config.js：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: config => {
    config.plugin('define').tap(definitions => {
      Object.assign(definitions[0]['process.env'], {
        NODE_HOST: '"http://localhost:8888"',
      });
      return definitions;
    });
  }
})

修改后的vue.config.js：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: config => {
    config.plugin('define').tap(definitions => {
      Object.assign(definitions[0]['process.env'], {
        NODE_HOST: '"http://localhost:8888"',
      });
      return definitions;
    });
  },
  devServer: {
    allowedHosts: 'all',
  },
});

有关分析可以看看这个文章：http://t.csdn.cn/jLgxe