先初始化一个vue3项目``

    1. # 初始化项目
    2. npm init vue@latest
    4. # 项目名字随便起
    5. # 进入项目 cd 
    7. ## 安装依赖
    8. yarn install
    10. ## 运行项目
    11. yarn dev

    打包项目

    1. yarn build
    3. # 打包目录为dist，使用serve启动一下
    4. serve -s dist

    可以看到跟dev是一样的
    将上述命令通过以下几步翻译为一个 Dockerfile：

    1. 选择一个基础镜像。由于需要在容器中执行构建操作，我们需要 node 的运行环境，因此 FROM 选择 node。
    2. 将以上几个脚本命令放在 RUN 指令中。
    3. 启动服务命令放在 CMD 指令中。 ```shell FROM node:14-alpine

    WORKDIR /code

    ADD . /code RUN yarn && npm run build

    CMD npx serve -s build EXPOSE 3000

    1. **缓存优化**
    2. ```shell
    3. FROM node:14-alpine as builder
    5. WORKDIR /code
    7. # 单独分离 package.json，是为了安装依赖可最大限度利用缓存
    8. ADD package.json yarn.lock /code/
    9. RUN yarn
    11. ADD . /code
    12. RUN npm run build
    14. # 选择更小体积的基础镜像
    15. FROM nginx:alpine
    16. COPY --from=builder code/dist /usr/share/nginx/html
    1. version: "3"
    2. services:
    3.   simple:
    4.     build:
    5.       context: .
    6.       dockerfile: simple.Dockerfile
    7.     ports:
    8.       - 4000:80

    使用 docker-compose up —build simple 启动容器。
    访问 http://localhost:4000 页面成功。