Vue项目打包成docker镜像部署
一、介绍
我们部署Vue项目，可以build之后，直接放到nginx下面即可，今天给大家介绍创建docker镜像，使用docker镜像启动容器运行部署Vue项目的方式，可以尝试尝试，原理和使用nginx部署一样，不过是使用的docker容器而已，内部还是使用的是nginx作为基础镜像。
二、docker安装
docker安装就不介绍了，不懂的伙伴可以去看我的docker安装文章。之前也写过关于docker介绍、安装的文章，不了解如何安装使用的可以看以往的文章。
三、编写DockerFile
docker安装完成之后，在我们需要部署的项目目录中新建文件dockerFile。文件内容如下：
FROM nginx:latest
LABEL Author xpy
COPY build /usr/share/nginx/html
第一行：设置基础镜像，基础镜像使用nginx
第二行：作者信息
第三行：将build文件夹下面的内容拷贝到/usr/share/nginx/html目录下面（nginx的默认项目路径），其中build文件夹有可能是dist文件夹，如果没有，重新npm run build一下就出来了,也就是我们Vue项目打包之后我们正常使用nginx是拷贝过去的文件夹。
四、创建镜像
docker build -t xxx .
注意：后面的.不能省略，镜像创建成功之后使用docker images即可看到自己创建的镜像
五、启动镜像
docker run -d --name xxx -p 8888:80 xxx
启动命令说明：
-d：容器后台启动
—name : 容器名称
-p 8888:80 ：将nginx容器的80端口映射到主机的8888端口，我们访问时直接访问主机ip+映射到主机的端口，这里是8888，如果有路径，后面还要带上路径。
xxx : 我们刚刚创建的自己的镜像的名称
六、总结
以上步骤即可帮助我们使用docker容器部署Vue项目，原理其实和我们使用nginx部署Vue是一样的，我们打包自己的镜像使用的基础镜像也是nginx，感兴趣的小伙伴可以自己动手尝试尝试。文章来源：https://www.toymoban.com/news/detail-401332.html
原文链接:https://monkey.blog.xpyvip.top/archives/vue-xiang-mu-da-bao-cheng-docker-jing-xiang-bu-shu文章来源地址https://www.toymoban.com/news/detail-401332.html
到了这里，关于Vue项目打包成docker镜像部署的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
