Docker 化 Vue2 应用开发

随着越来越多的项目使用 Vue3 ，前端项目可能面临新旧版本的问题，需要在本地切换 node.js 的版本，甚至出现一些依赖冲突的问题，为了避免这些问题最佳的方式是用 Docker 容器化来隔离每个开发环境。本文将介绍如何使用 Docker 对 Vue2 前端项目进行 Docker 化，用于项目开发过程。

进入本文的主题，在项目根目录下增加文件 Dockerfile，代码如下：

FROM node:14.19-alpine3.15

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

# 安装并缓存应用程序依赖项
COPY package.json /app/package.json
RUN npm install
RUN npm install @vue/cli@3.7.0 -g

# start app
CMD ["npm", "run", "serve"] 

再增加文件 .dockerignore，内容如下：

node_modules
.git
.gitignore 

这将加快 Docker 构建过程，因为本地依赖项和 git repo 不会被发送到 Docker 守护进程。

构建并标记 Docker 映像：

docker build -t vue2-app:dev . 

在构建完成后运行容器：

docker run -it -v ${PWD}:/app -v /app/node_modules -p 8080:8080 --rm vu