前端-如何通过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,会导致前端路由跳转报错。

相关推荐
daols8812 小时前
vxe-table 自定义数字行主键,解决默认字符串主键与后端类型不匹配问题
前端·javascript·vue.js·vxe-table
skywalk816312 小时前
g4f提供的模型调用:python JavaScript和curl
前端·javascript·vue.js·g4f
zb2006412012 小时前
springboot整合libreoffice(两种方式,使用本地和远程的libreoffice);docker中同时部署应用和libreoffice
spring boot·后端·docker
R-sz13 小时前
前端直接将页面 HTML 报表导出为 Word 文档,html转word
前端·html·word
恋恋风尘hhh13 小时前
Web 前端安全机制分析:以瑞数(RisShu)为例
前端·安全
tiger从容淡定是人生13 小时前
金融系统 Summit Backend 的 Docker 化实践:CI/CD、测试与安全性的工程经验总结
运维·docker·云原生·容器·eureka·金融
indexsunny13 小时前
互联网大厂Java面试实战:基于微服务与云原生的电商场景问答解析
java·数据库·spring boot·docker·微服务·云原生·kubernetes
freewlt13 小时前
前端安全新范式:2026年防护实战
前端·安全
包子源13 小时前
React-PDF 详解:API 要点与在线简历项目中的落地
前端·react.js·pdf
Bigger13 小时前
第九章:我是如何剖析 Claude Code 的 CLI 里的安全沙盒与指令拦截机制的
前端·claude·源码阅读