Docker环境运行Vue项目全过程

更新时间：2025年06月21日 10:19:08 作者：°Fuhb

这篇文章主要介绍了Docker环境运行Vue项目全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

1. 打包VUE工程

在vue工程根目录下，执行打包命令

npm run build

随后将生成 dist文件夹，里面的内容就是打包后的文件

2. 创建Nginx配置文件

在vue工程根目录下，创建文件 default.conf，内容如下：

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html/;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
}

3. 创建Dockerfile

在vue工程根目录下，创建文件 Dockerfile，内容如下：

FROM nginx

MAINTAINER fuhb

RUN rm /etc/nginx/conf.d/default.conf

ADD default.conf /etc/nginx/conf.d/

COPY dist/ /usr/share/nginx/html/

说明

FROM nginx：该镜像是基于nginx:latest镜像构建的
MAINTAINER fuhb：添加说明
RUN rm /etc/nginx/conf.d/default.conf：删除nginx自带的default.conf配置文件
ADD default.conf /etc/nginx/conf.d/：将default.conf复制到/etc/nginx/conf.d/下，用本地的default.conf配置来替换nginx镜像里的默认配置
COPY dist/ /usr/share/nginx/html/：将项目根目录下dist文件夹（构建之后才会生成）下的所有文件复制到镜像/usr/share/nginx/html/目录下

4. 创建镜像

把dist、default.conf、Dockerfile放在同一个目录下，例如 /usr/local/docker/web/

执行如下命令，注意最后有个点

docker build -t my-web .

执行命令docker images，会发现生成了一份名为 my-web的镜像

5. 创建容器

镜像已经有了，下一步就可以创建并运行容器了，执行如下命令

docker run -d --name my_web -p 10002:80 my-web

然后执行 docker ps -a ，会发现容器成功创建并运行了，此时可以通过10002端口号访问VUE站点。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Docker AIGC等大模型深度学习环境搭建步骤最新详细版
这篇文章主要介绍了Docker AIGC等大模型深度学习环境搭建步骤最新详细版,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-05-05
docker compose 一键部署分布式配置中心Apollo的过程详解
这篇文章主要介绍了docker compose 一键部署分布式配置中心Apollo,今天我们使用Docker来进行搭建,毕竟Docker对于开发者来说更友好一些，需要的朋友可以参考下
2021-09-09
docker部署gitlab以及修改初始密码方式
这篇文章主要介绍了docker部署gitlab以及修改初始密码方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-05-05
docker拉取镜像超时解决的问题解决
本文解决了由于网络问题导致的Docker拉取中央仓库镜像超时的问题,通过从其他镜像仓库拉取镜像文件来解决这一问题,感兴趣的可以了解一下
2025-03-03
使用Docker搭建私有PyPI镜像仓库的完整步骤教学
在企业内网或离线开发环境中,我们常常需要一个稳定、快速且可控制的 Python 包管理方案,本文将详细介绍如何使用 devpi 和 Docker 构建一个私有的 PyPI 镜像服务器,有需要的小伙伴可以了解下
2025-09-09
Linux下Docker安装配置教程
这篇文章主要为大家详细介绍了Linux下Docker安装配置教程，步骤简单清晰,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
docker inspect 命令使用技巧
这篇文章主要介绍了docker inspect 命令使用技巧，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01
删除docker中没有被使用的数据卷volume
发现docker占用宿主机的磁盘空间很大，这个时候如何来释放这些数据卷占用的空间呢，通过执行相关命令即可顺利解决，下面小编给大家介绍下删除docker中没有被使用的数据卷volume，感兴趣的朋友跟随小编一起看看吧
2023-01-01
docker部署nginx下日志自动切割方法实现
部署Nginx在Docker中时,其日志文件默认不会自动切割,与非Docker环境有所不同,本文介绍了三种日志切割方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-10-10
详解Windows 利用 WSL2 安装 Docker 的2种方式
这篇文章主要介绍了Windows 利用 WSL2 安装 Docker 的2种方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-10-10