编写Dockerfile
在项目根目录新建名为Dockerfile的文件, 并添加以下代码:
# build stage
# 拉取最小体积的node环境容器, 并安装cnpm (加快容器构建速度,npm比较慢)
FROM node:lts-alpine as build-stage
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
# 进入容器的app目录, 然后拷贝当前目录(根目录)的所有文件到容器的当前目录中(/app)
WORKDIR /app
COPY . .
# 删除vue环境配置文件(主要想通过容器的环境变量来达到不同的环境切换,以及为了部署到阿里云的容器服务或华为云的容器服务时, 通过配置项来配置相关的环境变量, 如果不需要可自行删除以下这句代码)
RUN rm -f .env.*
ENV VUE_APP_TEST_VALUE="My test Value"
#在容器内build
RUN cnpm run build
# production stage
# 最后通过nginx部署build出来的文件(/dist)
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]创建镜像
编写好Dockerfile后, 则可通过docker命令创建一个docker镜像, 以下为参考指令:
docker build --no-cache -t vue-docker:1.0 .启动容器
docker run -p 80:80 --name vue-docker1.0 vue-docker:1.0附上demo地址:https://gitee.com/mao-share/vue-docker.git
原文：https://segmentfault.com/a/1190000021849643
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！