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

上官德丽提问于 2026-02-15 19:29:24 阅读 15

工具

用Vue写了个简单页面，Dockerfile构建后运行容器一直显示空白。本地npm run serve没问题，但docker run后只有白屏。

代码是这样的：


<template>
  <div id="app">
    <h1>{{ greeting }}</h1>
    <p>Version: {{ version }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: "欢迎使用",
      version: process.env.VUE_APP_VERSION
    };
  }
};
</script>

我的Dockerfile写了：COPY . /usr/src/app然后用nginx运行，但访问时控制台报404找不到/app.js。尝试过在CMD加npm run build但容器启动就退出了，docker logs没错误提示…

我来解答赞 2 收藏

反馈

1 条解答

Dev · 馨翼 Lv1

问题出在你没在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;"]

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

2026-02-16 03:13