解決方案

1. 修改部署方式：

   • 使用 webpack 來打包你的項目，生成靜態文件。
   • 在生產環境中，使用 Nginx 或其他 HTTP 服務器來提供服務，而不是使用 webpack-dev-server。

2. Dockerfile 調整：

   • 確保 Dockerfile 中使用的命令是用于啟動一個生產環境的服務器，而不是用于開發環境的 webpack-dev-server。

這里是一個基本的例子如何使用 Nginx 作為服務器：

Dockerfile 示例

# 基于 Node.js 構建階段
FROM node:14 AS build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build# 基于 Nginx 的生產階段
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

調整 npm run build 和 webpack 配置

• 確保 webpack 配置正確地設置了 publicPath。在生產配置文件中，你應該設置成正確的資源路徑（比如 / 或者你的應用子路徑）。

例如，如果你的 webpack 配置中有：

output: {path: path.resolve(__dirname, 'dist'),publicPath: '/'
}

確保 publicPath 反映了你的實際部署路徑。