解决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