docker 配合nginx部署vue项目

当使用Docker配合Nginx部署Vue项目时，可以按照以下步骤进行操作：

1. 创建Docker镜像：首先，需要在项目根目录下创建一个Dockerfile文件，用于定义Docker镜像的构建规则。在Dockerfile中，可以指定基础镜像、安装依赖、拷贝项目文件等操作。例如：

# 使用Node.js作为基础镜像
FROM node:14.17.0 as build-stage

# 设置工作目录
WORKDIR /app

# 拷贝项目文件到工作目录
COPY . .

# 安装依赖并构建项目
RUN npm install
RUN npm run build

# 使用Nginx作为基础镜像
FROM nginx:1.21.0

# 拷贝构建好的项目文件到Nginx的默认静态文件目录
COPY --from=build-stage /app/dist /usr/share/nginx/html

# 拷贝Nginx配置文件到容器中
COPY nginx.conf /etc/nginx/nginx.conf

# 暴露Nginx的80端口
EXPOSE 80

# 启动Nginx服务
CMD ["nginx", "-g", "daemon off;"]

2. 构建Docker镜像：在项目根目录下执行以下命令，将会根据Dockerfile构建一个名为`vue-app`的镜像。

docker build -t vue-app .

3. 运行Docker容器：执行以下命令，将会在本地的8080端口启动一个名为`vue-d -p 80:80 --name vue-container vue-app

4. 访问Vue项目：在浏览器中访问`http://localhost`，即可查看部署好的Vue项目。