Vue 3 项目初始化怎么配置 Docker 容器化打包

浅敏君_2976

浅敏君_2976

2026-10-18

627人浏览

原创

vue3项目docker容器化核心是多阶段构建:先用node:20-alpine构建,再将dist产物复制到nginx:stable-alpine运行,配合完整.dockerignore排除冗余文件,精简镜像、提升安全与效率。

vue 3 项目初始化怎么配置 docker 容器化打包

Vue 3 项目做 Docker 容器化打包,核心是用多阶段构建:先用 Node 镜像完成构建,再把产物交给轻量 Nginx 镜像运行。不装多余依赖、不带源码、镜像体积小、启动快。

.dockerignore 文件要配全

它决定哪些文件不进镜像,直接影响构建速度和最终体积。必须排除开发期文件,保留运行必需项:

  • node_modules 和 npm-debug.log —— 构建阶段由 RUN npm install 生成,本地不用复制
  • dist 和 .output —— 构建产物由容器内生成,本地 dist 不参与 COPY
  • .git、.vscode、.DS_Store、*.log —— 开发元数据一律忽略
  • .env*.local 等环境文件 —— 防止敏感配置意外打入镜像

Dockerfile 要分两个阶段写

第一阶段专注构建,第二阶段专注服务,中间只传递 dist 目录:

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 17.1万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

Vue.js 微实战--十天技能课堂
Vue.js 微实战--十天技能课堂

共18课时 | 1.7万人学习