需要工具
Xftp Xshell首先对前端项目进行打包：npm run build
打包完成
在项目中生成dist文件：
通过Xshell在/home目录下创建项目文件夹
通过Xftp将打包的dist文件上传到服务器的项目文件夹下；
利用Xshell在拉起nginx镜像
在项目文件夹下编写nginx config配置文件
default.conf内容如下：
该配置文件定义了首页的指向为 /usr/share/nginx/html/index.html, 所以我们可以一会把构建出来的index.html文件和相关的静态资源放到/usr/share/nginx/html目录下。
在项目文件夹下编写Dockerfile文件
Dockerfile内容如下：
Dockerfile内容解释
如下三个文件保持在同一目录 
构建docker镜像
注意不要少了最后的“.”(点) -t是给镜像命名，.(点)是基于当前目录的Dockerfile来构建镜像
查看刚刚构建的镜像
启动docker容器
解释：
docker run：基于镜像启动一个容器 -d：后台方式启动 -p 9090:80: 端口映射，将宿主机的9090端口映射到容器的80端口 –name：容器名，我起的叫test xxxx：要启动的镜像名称查看启动的容器
访问
现在我们已经启动了，访问宿主机的地址:9090就可以看到我们部署的网站了
到此这篇关于Docker容器部署前端Vue服务(小白教程)的文章就介绍到这了,更多相关Docker容器部署Vue内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！
原文地址：https://blog.csdn.net/xiaolong124/article/details/123458100
声明： 猿站网有关资源均来自网络搜集与网友提供，任何涉及商业盈利目的的均不得使用，否则产生的一切后果将由您自己承担！ 本平台资源仅供个人学习交流、测试使用 所有内容请在下载后24小时内删除，制止非法恶意传播，不对任何下载或转载者造成的危害负任何法律责任！也请大家支持、购置正版！ 。本站一律禁止以任何方式发布或转载任何违法的相关信息访客发现请向站长举报，会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。本网站的资源部分来源于网络，如有侵权烦请发送邮件至：2697268773@qq.com进行处理。