前端-如何通过docker打包Vue服务成镜像并在本地运行(本地可以通过http://localhost:8080/访问前端服务)

1、下载安装docker,最好在vs code里安装docker的插件。

下载链接:https://www.docker.com/products/docker-desktop

🎉 Docker 简介和安装 - Docker 快速入门 - 易文档 (easydoc.net)

2、准备配置文件-dockerfile文件和nginx.conf文件

dockerfile文件:基本配置如下

复制代码
FROM registry.cn-beijing.aliyuncs.com/hiacloud/nginx:1.25.1
COPY dist/ /usr/share/nginx/html

另外准备一份nginx.conf文件(网上可搜)

3、命令行操作

首先下载vue的依赖,并且打包在本地生成dist文件

然后运行docker命令

复制代码
//打包成镜像
docker build -t my-nginx-image .
//启动服务
docker run -d -p 8080:80 my-nginx-image

接着就可以在本地通过http://localhost:8080/访问前端服务。

注意点

没有nginx.conf,会导致前端路由跳转报错。

相关推荐
IT_陈寒6 小时前
Vite静态资源引用差点把我逼疯,原来要这样处理
前端·人工智能·后端
Plastic garden6 小时前
K8s(2)安装,集群
云原生·容器·kubernetes
子兮曰6 小时前
WSL 配 GPU 用 Docker 的折腾指南(2026 年版)
linux·前端·后端
lantian6 小时前
TypeScript 三斜线指令完全指南:从入门到理解为什么不再需要它
前端·javascript·vue.js
鹏多多6 小时前
锐评CSDN最近上线的AI数字营销:烂完之前最后再捞一笔
前端·后端·程序员
先吃饱再说7 小时前
从 WeUI 按钮组件学 BEM 命名规范:让 CSS 不再难维护
前端·代码规范
槑有老呆7 小时前
从前端 HTTP 请求到 LLM 接口调用:一篇文章带你彻底搞懂
前端
陈_杨7 小时前
鸿蒙APP开发-带你走进旧物集的时间线与收藏管理
前端·javascript
拂尘子7 小时前
前端屎山代码救星:这个 MCP 把 7000 行页面压成 60 行骨架,Token 直接省掉 90%+
前端·ai编程·mcp
小雨下雨的雨7 小时前
月相分析工具鸿蒙PC Electron框架技术实现详解
前端·javascript·华为·electron