docker 部署vue项目

部署 Vue 项目可以使用 Docker 进行容器化部署，下面是一些基本步骤：

1. 构建 Vue 项目

在本地使用 `npm run build` 命令构建 Vue 项目，生成 `dist` 目录。

2. 创建 Dockerfile 文件

在项目根目录下创建一个名为 `Dockerfile` 的文件，内容如下：

# 基础镜像
FROM nginx:1.17.9-alpine

# 复制本地的 dist 到 nginx 镜像的 html 目录
COPY ./dist /usr/share/nginx/html

# 将 nginx.conf 配置文件复制到镜像中的 /etc/nginx/conf.d/ 目录下
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

# 暴露 80 端口
EXPOSE 80

# 容器启动时运行 nginx
CMD ["nginx", "-g", "daemon off;"]

其中，`nginx:1.17.9-alpine` 是使用的基础镜像，`COPY` 命令将本地 `dist` 目录复制到镜像中的 `/usr/share/nginx/html` 目录下，`nginx.conf` 是 Nginx 的配置文件。

3. 创建 nginx.conf 文件

在项目根目录下创建一个名为 `nginx.conf` 的文件，内容如下：

server {
  listen 80;
  server_name localhost;

  location / {
    root /usr/share/nginx/html;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

这里是一个简单的 Nginx 配置，将所有请求都指向 `/usr/share/nginx/html` 目录下，并且尝试在该目录下寻找匹配的文件或目录。

4. 构建 Docker 镜像

使用 `docker build` 命令构建 Docker 镜像：

docker build -t my-vue-app .

其中，`my-vue-app` 是镜像名称，`.` 表示 Dockerfile 文件在当前目录下。

5. 运行 Docker 容器

使用 `docker run` 命令运行 Docker 容器：

docker run -itd --name my-vue-app-container -p 8080:80 my-vue-app

其中，`my-vue-app-container` 是容器名称，`-p` 参数将主机的 8080 端口映射到容器的 80 端口上，`my-vue-app` 是镜像名称。

6. 访问应用

在浏览器中访问 `http://localhost:8080` 即可看到 Vue 应用程序运行。