Vue3部署Nginx后出现‘Invalid Host header’问题求助

核心前提说明 #

这个提示本质是开发环境服务器（devServer/Vite Server）的主机校验机制触发的，先确认你的项目是用Vite还是Vue CLI构建的——两者配置文件完全不同，这大概率是你之前配置无效的原因。

情况1：项目用Vite构建（Vue3默认模板） #

Vite的配置文件不是vue.config.js，而是vite.config.js，之前的配置完全不生效。修改项目根目录下的vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    // 允许所有主机访问（开发环境临时用）
    host: '0.0.0.0',
    // 或者指定你的域名，更安全
    allowedHosts: ['yourdomain.com']
  }
})

修改后重启Vite开发服务，再通过Nginx访问试试。

情况2：项目用Vue CLI构建（基于Webpack） #

检查vue.config.js的完整写法，确保配置生效，并且重启开发服务器：

module.exports = {
  devServer: {
    host: '0.0.0.0', // 让devServer监听所有网卡，否则Nginx可能无法连接
    allowedHosts: ['yourdomain.com'],
    disableHostCheck: true // 开发环境临时关闭校验，生产环境禁止使用
  }
}

生产环境必看：别反向代理开发服务器 #

如果是正式部署，绝对不要把Nginx反向代理到localhost:8080的开发服务器，正确流程是：

1. 执行npm run build打包生成dist静态目录
2. 让Nginx直接托管这个目录，配置示例：

server {
    listen 80;
    server_name yourdomain.com;

    # 替换成你的dist目录绝对路径
    root /usr/share/nginx/html/your-project/dist;
    index index.html;

    # 处理Vue路由（如history模式）
    location / {
        try_files $uri $uri/ /index.html;
    }
}

这种方式不会出现Invalid Host header问题，也是生产环境的标准部署方式。

内容的提问来源于stack exchange，提问作者henrbu