Docker部署前端项目后页面空白是怎么回事？

Good“莉娜提问于 2026-03-13 05:27:17 阅读 3

工具

我用 Docker 打包了一个 Vue 项目，本地 npm run build 能正常生成 dist 文件，但部署到容器里访问就一片空白，控制台也没报错。我试过把 nginx 配置改成 try_files $uri $uri/ /index.html;，还是不行。

这是我的 Dockerfile：

FROM nginx:alpine
COPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80

我来解答赞 4 收藏

反馈

1 条解答

打工人紫萱 Lv1

页面空白但控制台没报错，基本可以排除路由问题（你try_files改了对吧）。

最可能的原因是：你的 nginx.conf 配置根本没生效，或者文件没复制进去。

先确认一下容器里的情况：

执行 docker exec -it 你的容器名 ls -la /usr/share/nginx/html/ 看看 dist 文件是否真的复制进去了。如果目录是空的，那就是 COPY 指令的问题——你 build 后的 dist 目录放在哪里？Dockerfile 在哪个目录执行的？

如果文件确实复制进去了，再执行 docker exec -it 你的容器名 cat /etc/nginx/nginx.conf 看看配置是否正确加载了。你 COPY 过去的 nginx.conf 可能语法有问题，或者 location 块没写对。

还有一种常见情况：Vue 项目 build 时用了绝对路径，但你的服务跑在子路径（比如 xxx.com/abc/）上，这时候静态资源 404，但因为是异步加载的 JS，控制台可能不报。这需要在 vue.config.js 里配置 publicPath。

你把 nginx.conf 的内容贴出来看看？或者最简单的方式：直接删掉 COPY nginx.conf 那行，用 nginx 默认配置先跑一下，看能不能正常显示。

2026-03-13 06:03