VUE 项目用 Docker+Nginx进行打包部署

为了在Vue项目中使用Docker和Nginx进行打包部署，你需要执行以下步骤：

1. 创建Dockerfile：

# 基于Node镜像创建一个新的镜像
FROM node:lts-alpine as build-stage
 
# 设置工作目录
WORKDIR /app
 
# 复制`package.json`和`package-lock.json`（如果有）
COPY package*.json ./
 
# 安装项目依赖
RUN npm install
 
# 复制项目文件到工作目录
COPY . .
 
# 构建Vue项目
RUN npm run build
 
# 基于Nginx镜像创建一个新的镜像
FROM nginx:stable-alpine as production-stage
 
# 从构建阶段复制构建结果到Nginx目录
COPY --from=build-stage /app/dist /usr/share/nginx/html
 
# 暴露80端口
EXPOSE 80
 
# 启动Nginx，并且Nginx会持续运行
CMD ["nginx", "-g", "daemon off;"]

2. 在项目根目录创建.dockerignore文件，以避免不必要的文件复制：

node_modules
.git
.dockerignore
Dockerfile
README.md

3. 在项目根目录创建docker-compose.yml文件，用于定义多容器部署：

version: '3.8'
 
services:
  vueapp:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "80:80"

4. 在项目根目录执行以下命令来构建和运行Docker容器：

docker-compose up --build

5. 确保你的Vue项目的vue.config.js文件（如果有）正确配置了publicPath，例如：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/'
    : '/'
}

以上步骤会创建一个Docker镜像，其中包含了构建好的Vue项目，并且通过Nginx来提供服务。然后使用docker-compose来运行这个镜像，并且将容器的80端口映射到本机的80端口上。