docker部署vue项目
编写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
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
