Docker部署Vue应用用http-server启动后css/js报404如何解决

问题根因 #

你当前遇到的打包失败、容器启动后页面无内容的核心原因是：require.context会在构建阶段遍历指定目录下所有匹配规则的文件，5万张jpeg会全部被webpack纳入构建流程，不仅会导致打包耗时极长、体积远超合理范围，还大概率会触发内存溢出导致构建失败，生成的dist目录本身就是不完整的，所以用http-server启动后自然加载不出内容。

可行解决方案 #

1. 优先方案：静态资源单独托管，不要打进前端包 #

• 完全不需要把5万张海报放到assets目录参与构建，直接把所有海报放到独立的静态资源服务托管，你提到的Google Drive公共托管是可行的，也可以用其他对象存储服务。
• 修改图片加载逻辑，不需要require.context，直接拼接资源服务的公共访问地址即可：

getImgUrl(imgName) {
  // 替换成你托管海报的公共服务地址前缀
  return `https://你的托管服务地址/posters/${imgName}.jpg`
}

• 这种方案下构建不会处理任何海报图片，打包速度和体积都会恢复正常，是生产环境的最优选择。

2. 如果必须本地托管海报到同一服务 #

• 把posters文件夹放到Vue项目的public目录下，public目录下的文件不会被webpack构建，会直接原样复制到dist目录。
• 修改图片加载逻辑：

getImgUrl(imgName) {
  return `${process.env.BASE_URL}posters/${imgName}.jpg`
}

• 注意这种方案打包后dist目录会包含全部5万张海报，传输、部署容器的时候会很慢，仅适合本地测试场景使用。

关于webpack代码分割提示的说明 #

这个提示是webpack的通用性能提醒，对你当前的场景完全不适用，你的问题是静态资源打包逻辑错误，和代码分割没有关系，不需要做import()或者require.ensure相关的改造。

Docker部署注意事项 #

修复打包问题、确保本地执行npm run build生成完整的dist目录后，再执行镜像构建，容器启动命令CMD["http-server", "dist"]本身没有问题。

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