docker部署vue页面 404

Docker 部署 Vue 页面遇到 404 错误解决方案

在使用 Docker 部署 Vue.js 页面时，有时候会遇到页面无法正常显示，出现 404 错误的情况。这种问题通常是因为 Docker 容器配置不正确导致的，下面我们来介绍一种解决方案。

解决方案

首先，我们需要确保在 Dockerfile 中正确配置 Vue 项目的打包和部署。我们可以通过以下步骤来解决 404 错误：

步骤一：创建 Dockerfile

首先，在 Vue 项目根目录下创建一个 Dockerfile 文件，内容如下：

```dockerfile
# 使用官方 Node 镜像作为基础镜像
FROM node:12-alpine AS build

# 设置工作目录
WORKDIR /app

# 拷贝 package.json 和 package-lock.json 到工作目录
COPY package*.json ./

# 安装依赖
RUN npm install

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

# 打包 Vue 项目
RUN npm run build

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

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

# 暴露端口
EXPOSE 80

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

步骤二：构建 Docker 镜像并运行容器

使用以下命令构建 Docker 镜像并运行容器：

```shell
docker build -t vue-app .
docker run -d -p 8080:80 vue-app

这样我们就可以在浏览器中访问 http://localhost:8080 查看部署好的 Vue 页面了。

甘特图

以下是本文中提到的步骤的甘特图表示：

gantt
    title Docker 部署 Vue 页面
    section 创建 Dockerfile
    创建 Dockerfile :a1, 2022-01-01, 1d
    section 构建 Docker 镜像
    构建 Docker 镜像 :a2, after a1, 1d
    section 运行容器
    运行容器 :a3, after a2, 1d

饼状图

以下是 Docker 部署 Vue 页面遇到 404 错误的解决方案的饼状图表示：

pie
    title Docker 部署 Vue 页面 404 错误解决方案
    "正确配置Dockerfile", 50
    "构建Docker镜像", 25
    "运行容器", 25

通过上述步骤，我们可以成功地解决 Docker 部署 Vue 页面遇到 404 错误的问题。希望这篇文章对你有所帮助！