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

一传志提问于 2026-03-11 23:56:23 阅读 81

工具

我用 Docker 打包了一个 Vue 项目，本地开发时一切正常，但部署到服务器后访问页面是空白的，控制台也没报错。我试过把 nginx.conf 里的 root 指向 dist 目录，但好像没生效。

这是我的 Dockerfile 和 nginx 配置：

FROM node:18 AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80

events {}
http {
    server {
        listen 80;
        root /usr/share/nginx/html;
        index index.html;
        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

我来解答赞 1 收藏

反馈

1 条解答

♫思捷 Lv1

你的问题大概率出在 Vue 项目的资源路径配置上，而不是 nginx 配置。

nginx 的 try_files 写对了，但 Vue 构建后的资源引用路径可能有问题。你需要检查一下 vue.config.js 里有没有配置 publicPath：

// vue.config.js

module.exports = {

  publicPath: '/'

}

如果是 Vite 项目，就在 vite.config.js 里配 base：

// vite.config.js

export default {

  base: '/'

}

这个不配的话，默认是相对路径 ./，在服务器上直接访问可能没问题，但通过 nginx 代理或者非根路径部署时，资源就会 404，然后页面空白。

另一个可能：你的 nginx.conf 复制到容器里了吗？检查一下容器里 /etc/nginx/nginx.conf 是否存在，以及配置有没有生效。最简单的验证方法就是进容器看看文件在不在：

docker exec -it 你的容器名 ls /usr/share/nginx/html

看看 dist 里的文件有没有复制进去。

2026-03-12 00:00