如何解决Vue 3项目部署到DigitalOcean时出现的「Invalid host header」错误？

别担心，这个「Invalid host header」错误本质是Vue开发服务器的安全校验机制在起作用——它默认只允许本地地址（比如localhost、127.0.0.1）访问，防止DNS劫持类的攻击。禁用disableHostCheck确实能解决问题，但会带来安全漏洞，咱们用更安全的方式搞定它：

方案一：用allowedHosts替代disableHostCheck（Vue CLI 4.3+支持） #

这是官方推荐的安全替代方案，直接指定允许访问的域名/IP列表，既通过校验又保留安全防护：

1. 在项目根目录创建或修改vue.config.js，添加以下配置：

module.exports = {
  devServer: {
    allowedHosts: [
      "your-domain.com", // 替换成你的实际域名
      "123.45.67.89", // 替换成DigitalOcean服务器的公网IP
      "*.your-domain.com" // 如果有子域名需求，可添加（仅限你信任的域名）
    ]
  }
};

2. 重新构建容器并启动，此时服务器只会接受来自上述指定地址的请求，完美解决host校验问题。

方案二：部署生产构建版本（最推荐，适合线上环境） #

你现在可能是直接用npm run serve启动开发服务器部署，但开发服务器本来就不是为线上环境设计的——性能差、安全防护弱。正确的姿势是构建生产版本后用Nginx托管：

步骤1：构建生产包 #

在本地项目执行：

npm run build

这会生成一个dist目录，里面是优化后的静态文件。

步骤2：修改Dockerfile（容器化生产版本） #

用多阶段构建打包，既减小镜像体积，又保证运行环境安全：

# 第一阶段：构建生产包
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install --production
COPY . .
RUN npm run build

# 第二阶段：用Nginx托管静态文件
FROM nginx:alpine
# 复制构建好的静态文件到Nginx目录
COPY --from=builder /app/dist /usr/share/nginx/html
# 自定义Nginx配置（处理Vue路由等）
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

步骤3：配置Nginx（nginx.conf） #

如果你的Vue用了history路由模式，需要添加路由 fallback 配置：

events {
    worker_connections 1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    server {
        listen 80;
        root /usr/share/nginx/html;
        index index.html;

        # 处理Vue History模式的路由
        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

步骤4：重新构建并部署容器 #

这样部署后，没有了开发服务器的host校验问题，而且性能和安全性都远优于开发环境部署，是线上生产的标准做法。

方案三：应急临时方案（不推荐长期使用） #

如果你确实需要临时用开发服务器部署，除了配置allowedHosts，还要启动时指定HOST为0.0.0.0（让服务器监听所有IP）：
修改项目的package.json中的scripts：

"scripts": {
  "serve": "HOST=0.0.0.0 vue-cli-service serve"
}

再配合方案一的allowedHosts配置，确保只有可信地址能访问。

内容的提问来源于stack exchange，提问作者kri-dev