docker 部署vue项目

可以通过以下步骤在 Docker 中部署 Vue 项目：

1. 首先，需要安装 Docker 和 Docker Compose。

2. 在 Vue 项目的根目录下，创建一个 Dockerfile 文件，内容如下：

   # 基础镜像，可以根据自己的需求选择
   FROM node:14.16.1-alpine3.10
   
   # 设置工作目录
   WORKDIR /app
   
   # 将 package.json 和 package-lock.json 复制到容器中
   COPY package*.json ./
   
   # 安装依赖
   RUN npm install
   
   # 将所有文件复制到容器中
   COPY . .
   
   # 打包 Vue 项目
   RUN npm run build
   
   # 暴露容器的端口号
   EXPOSE 80
   
   # 启动命令
   CMD ["npm", "run", "start"]

3. 在同级目录下创建一个 docker-compose.yml 文件，内容如下：

   version: "3"
   services:
     web:
       build: .
       ports:
         - "8080:80"

4. 在终端中切换到 Vue 项目的根目录，运行以下命令来构建和启动容器：

   docker-compose up --build

5. 打开浏览器，在地址栏中输入 http://localhost:8080，即可访问 Vue 项目。

注意事项：

- 如果在构建容器时出现 npm 安装失败的情况，可以尝试将 Dockerfile 中的基础镜像替换为 node:14.16.1 或者 node:14.16.1-alpine3.11。
- 如果在访问 http://localhost:8080 时出现了“404 Not Found”错误，可以尝试将 docker-compose.yml 文件中的端口号从 8080 改为 80。