Vue.js 2 + Webpack 5 Dev Server配置报错及部署问题求助

问题原因 #

Webpack Dev Server 4（对应Webpack 5版本）彻底移除了public配置项，你之前在@vue/cli-service 4.5（对应Webpack 4）中使用的devServer.public配置已不再被支持，这就是触发ValidationError的直接原因。而"Invalid host header"错误则是因为Dev Server默认限制了可访问的主机域名。

解决方案 #

修改vue.config.js中的devServer配置，用Webpack Dev Server 4支持的新配置项替代原有的public：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: [
    'vuetify'
  ],
  lintOnSave: false,
  devServer: {
    port: 8000,
    // 允许指定域名访问，解决"Invalid host header"错误
    allowedHosts: [process.env.VUE_APP_DOMAIN],
    // 配置WebSocket外部访问地址，确保热更新功能正常
    client: {
      webSocketURL: {
        hostname: process.env.VUE_APP_DOMAIN,
        port: 8000 // 与devServer的port保持一致
      }
    }
  },
})

配置说明 #

1. allowedHosts：替代原public的主机白名单功能，指定允许访问Dev Server的域名。如果需要临时允许所有主机（不建议生产环境使用），可以设置为allowedHosts: 'all'。
2. client.webSocketURL：当Dev Server部署到外部服务器（如DigitalOcean）时，需要指定客户端WebSocket的连接地址，确保热更新信号能正确传递。

额外排查步骤 #

• 确认你的@vue/cli-service版本为5.x（Webpack 5兼容版本），可以通过npm list @vue/cli-service查看版本，若版本过低需升级：npm install @vue/cli-service@latest
• 清除依赖缓存后重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

• 验证环境变量VUE_APP_DOMAIN已正确设置（如在DigitalOcean的项目环境变量中配置你的域名）

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