解决方案
-
修改部署方式:
- 使用
webpack
来打包你的项目,生成静态文件。 - 在生产环境中,使用 Nginx 或其他 HTTP 服务器来提供服务,而不是使用
webpack-dev-server
。
- 使用
-
Dockerfile 调整:
- 确保 Dockerfile 中使用的命令是用于启动一个生产环境的服务器,而不是用于开发环境的
webpack-dev-server
。
- 确保 Dockerfile 中使用的命令是用于启动一个生产环境的服务器,而不是用于开发环境的
这里是一个基本的例子如何使用 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
反映了你的实际部署路径。