Vue项目通过Docker部署后页面空白，Dockerfile哪里出问题？

你这个白屏问题其实挺典型的，我之前也踩过同样的坑，来一步步帮你理清楚。

首先你得明白，Vue项目在开发环境和生产环境的运行方式是完全不同的。

开发的时候你用 npm run serve 是启动了一个本地的开发服务器（基于 webpack-dev-server），它会动态打包、热更新，还能处理各种路由，所以本地能跑。

但你用 Docker 部署的时候，如果只是把源码直接 COPY 进去然后用 nginx 启动，那 nginx 里没有任何东西可以处理 Vue 的前端路由，更别提打包后的静态资源路径对不对了。

你提到控制台报 404 找不到 /app.js，说明你访问的页面里引用了这个 JS 文件，但 nginx 里根本没这个文件——因为你还 没打包！

你试过在 CMD 里加 npm run build 但容器启动就退出，这是因为 npm run build 执行完就结束了，没有前台进程，nginx 根本没启动起来，容器自然就退出了。

正确的做法应该是分两步走：

第一步：构建阶段
用一个 Node 环境的镜像把项目打包成静态文件（也就是 dist 目录）

第二步：运行阶段
用 nginx 把 dist 里的静态文件服务出来

我给你写一个完整能跑的 Dockerfile，你照着改就行：

# 构建阶段：用 node 镜像打包

FROM node:18-alpine AS build



WORKDIR /app



# 先复制 package.json 和 package-lock.json（如果有的话）用于缓存

COPY package*.json ./



RUN npm install



# 再复制整个项目

COPY . .



# 构建（生成 dist 目录）

RUN npm run build





# 运行阶段：用 nginx 部署

FROM nginx:alpine



# 把 nginx 的默认配置覆盖掉，重点是处理 Vue 的 history 模式路由

COPY --from=build /app/nginx.conf /etc/nginx/conf.d/default.conf



# 把构建好的静态文件复制进 nginx 的默认目录

COPY --from=build /app/dist /usr/share/nginx/html



EXPOSE 80



CMD ["nginx", "-g", "daemon off;"]

你可能没写 nginx.conf，这里也给你一个最常用的配置，要和上面的 Dockerfile 放在同一个目录下：

server {

    listen       80;

    server_name  localhost;

    root         /usr/share/nginx/html;

    index        index.html;



    # 重点：处理 Vue 的 history 模式路由，所有 404 都重定向到 index.html

    location / {

        try_files $uri $uri/ /index.html;

    }



    # 可选：压缩静态资源

    gzip on;

    gzip_types text/plain application/javascript text/css application/json;

}

这里有几个地方你得特别注意：

1. 你原来的 COPY . /usr/src/app 是把源码复制进去了，但没打包，nginx 只会当它是普通文件，根本不会处理 Vue 的入口逻辑
2. npm run build 必须在 Docker 里执行，而且要确保 dist 目录生成成功（可以本地先跑一遍 npm run build 看看有没有报错）
3. nginx 的配置里 try_files 这一行非常关键，Vue 默认用的是 history 模式，如果不加这个，刷新页面或者直接访问路由地址会 404

另外你代码里用了 process.env.VUE_APP_VERSION，这个变量是通过 .env 文件注入的，你得确认你的项目根目录有类似这样的文件：

VUE_APP_VERSION=1.0.0

否则打包时会是 undefined，虽然不会导致白屏，但页面内容可能不对。

最后你构建的时候建议加个 .dockerignore，把 node_modules、dist 等排除掉，避免污染构建上下文：

node_modules

dist

.git

.gitignore

README.md

构建命令你照着这样来：

docker build -t my-vue-app .

运行：

docker run -p 8080:80 my-vue-app

然后浏览器访问 http://localhost:8080 就能看到页面了。

我当年第一次也卡在这儿，以为是环境变量或者 nginx 权限问题，折腾半天才发现是漏了 try_files 和没打包……你按这个来，应该就能跑起来了。

问题出在你没在Dockerfile里正确构建Vue项目，直接COPY到nginx肯定是404，因为缺静态文件。省事的话，改一下Dockerfile，先build再拷贝到nginx：

FROM node:16 AS build

WORKDIR /app

COPY . .

RUN npm install && npm run build



FROM nginx:alpine

COPY --from=build /app/dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

这样就完事了，别折腾那些乱七八糟的命令了。