手把手教你实现Docker 部署 vue 项目

下面是详细讲解“手把手教你实现Docker 部署 vue 项目”的完整攻略。

1. 安装 Docker

在开始使用 Docker 之前，请确保已经正确安装 Docker。可以在 Docker 官网中查看并下载适合自己操作系统版本的 Docker。

2. 准备 Vue 项目

在本地准备一个 Vue 项目，并在该项目目录下创建一个 Dockerfile 文件，在 Dockerfile 中写入以下内容：

# 使用官方 nginx 镜像作为基础镜像
FROM nginx

# 将项目中的 nginx 配置文件复制到容器中的 /etc/nginx/conf.d/ 目录下
COPY nginx.conf /etc/nginx/conf.d/

# 将项目中的所有文件都复制到容器中的 /usr/share/nginx/html/ 目录下
COPY dist/ /usr/share/nginx/html/

# 暴露容器的 80 端口，允许外部访问
EXPOSE 80

在项目目录下还需要创建一个 nginx.conf 文件，用于配置 nginx 的相关内容，示例 nginx.conf 内容如下：

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

3. 构建 Docker 镜像

在 Vue 项目目录下打开终端，执行以下命令构建 Docker 镜像：

docker build -t my-vue-app .

其中，my-vue-app 是自定义的镜像名称，. 表示当前目录（Vue 项目目录）。

4. 运行 Docker 容器

在构建完成后，运行以下命令启动容器：

docker run -p 8080:80 my-vue-app

其中，8080 是本地端口号，80 是容器端口号，my-vue-app 是镜像名称。

运行以上命令后，访问 localhost:8080 即可访问 Vue 项目。如果需要访问其他 IP 或域名，将 localhost 替换为对应的 IP 或域名即可。

5. 示例说明一

假设你已经安装了 Docker 和 Vue CLI，并且已经创建了一个 Vue 项目：

vue create my-vue-app

然后，进入 my-vue-app 目录，执行以下命令：

docker build -t my-vue-app .

接下来，运行以下命令启动容器：

docker run -p 8080:80 my-vue-app

然后，访问 localhost:8080 即可访问 Vue 项目。

6. 示例说明二

假设你已经有一个现有的 Vue 项目，且使用的是 Vue CLI 2，需要将其使用 Docker 部署。

首先，在 Vue 项目目录下创建一个 Dockerfile 文件，并写入以下内容：

FROM nginx

COPY nginx.conf /etc/nginx/conf.d/
COPY dist/ /usr/share/nginx/html/

EXPOSE 80

然后，在同一目录下创建一个 nginx.conf 文件，并写入以下内容：

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

接着，使用以下命令构建 Docker 镜像：

docker build -t my-vue-app .

最后，使用以下命令启动容器：

docker run -p 8080:80 -v /path/to/vue-project/dist:/usr/share/nginx/html my-vue-app

其中，/path/to/vue-project/dist 是本地 Vue 项目中 dist 目录的绝对路径。