–>本地登录docker hub
发布时间：2025-06-24 20:49:14 作者：北方职教升学中心 阅读量：925
:80 docker-vue:latest。
执行命令。
创建项目命令（以vite为例）：
npm init vue@latest。
2 配置Dockerfile。
打包部署。目的是生成镜像文件images，并在docker中运行容器container。 第一阶段实际上是vue项目的包装。>
也可以分步登录，先执行。
你可以看到�这是vite创建的默认vue3项目。
〇 步骤。-u。hub访问非常不稳定，科学上网最好。–>
本地镜像关联dockerdocker hub仓库。login。我对这两个都不熟悉�探索了一段时间，记录打包docker镜像的完整过程。>-p。这样，
执行一段时间后这个镜像出现在仓库里。操作镜像。你可以看到�docker-vue镜像，标签名是latest。docker比较麻烦，需要对服务器有一定的了解，还要熟练掌握Linux命令，但是，本地镜像关联dockerdocker hub仓库。第一阶段实际上是vue项目的包装。–>本地登录docker hub。
–>
运行镜像。 --name。nginx在根目录下添加.config文件，并进行相关配置：
server { listen 80; listen [::]:80; server_name localhost; access_log /var/log/nginx/host.access.log main; location / { root /usr/share/nginx/html; index index.html index.htm; # 新增以下句子其他的默认nginx配置 # 解决部分前端框架的路由问题，浏览器刷新报错404 try_files $uri $uri/ /index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; }}。该项目不是直接在服务器上包装镜像的，或者我们可能需要把自己打包的镜像发给别人使用，在这里，
需要科学上网才能注册docker账号。
docker login。–>创建docker hub仓库。
–name 容器名。
镜像别名（也叫标签，不能写，默认是latest，最后一点（ .）不能省略，省略后报错，它的功能是在根目录下找到包装配置中的Dockerfile文件。
tag docker-vue huang372/test。
5174。
一 vue项目的开发。
到目前为止，docker包装vue项目全部完成。这似乎是运维工作，但是在没有专有操作和维护的情况下，我得先了解一下自己。本地登录docker hub，我用vscode，vscode提供了一键登录docker的插件（事实上，
打包配置。 创建docker hub仓库我在这里创建了一个名为test的仓库。docker+vue云服务器包装镜像相关操作。
容器化部署似乎是目前非常主流的趋势，无论是前端还是后端，流行的操作是给你一个镜像地址，让你自己拉镜像，您需要将您打包的镜像上传到docker仓库，也就是docker hub，从目前的情况来看，将镜像文件推送到仓库。
-d 后台运行。
也就是docker包装镜像配置。c;通过命令行登录docker。
docker-vue:latest 镜像名。上传仓库后，如果是公共镜像，每个人都可以通过docker拉这个镜像在自己的服务器上运行。
2 dockerfile配置。
执行命令。
😢上传时需要删除node_modules文件夹，否则会出现与npm权限相关的问题。接下来，
四 上传docker仓库。vue项目的镜像制作就完成了，docker部署，仓库上传所有内容。
下一步是打包过程，需要打包一段时间。
-p 端口， 5174是指宿主机暴露的端口，也就是浏览器访问时的端口，80是镜像本身使用的端口，nginx配置时，使用80端口。
–>
- 将包装好的镜像推送到docker hub。这些步骤需要完成。打包镜像。
在某些情况下，docker-vue。，docker 在中国，
二 打包配置。
docker。我不明白如何成功登录） 如果没有vscode，
docker。
<密码。run。
打包后，您可以在docker中查看镜像文件，查看命令：
docker images。<用户名。注册docker账号。
三 打包部署。
开发完成后将代码上传到云服务器可使用XFTP或Xshell。这些步骤需要完成。
1 NGINX配置。docker。- vue项目的开发。
push huang372/test。新的Dockerfile文件并在文件中填写以下代码：
# 第一阶段：node镜像包FROM包 node:latest AS frontend-builderWORKDIR /build-appCOPY . .RUN npm installRUN npm run build# 第二阶段：nginx包装FROM nginx:latestEXPOSE 80WORKDIR /app# COPY替换nginx nginx.conf /etc/nginx/conf.d/default.conf# 将第一阶段的静态文件复制到nginxRUN rm -rf /usr/share/nginx/htmlRUN mkdir /usr/share/nginx/htmlCOPY --from=frontend-builder /build-app/dist /usr/share/nginx/html# 运行CMD ["nginx", "-g", "daemon off;"]。-d。# docker包装镜像 build -t docker-vue:latest .。
实施后，可以通过ip:port访问docker上部署的项目。
，然后按要求输入用户名和密码。使用webpack或vite创建vue项目༌并完成开发。
:latest。
第二阶段是替换nginx中的相关文件，替换是第一阶段打包的静态文件。-p。镜像可以在docker中运行c;命令为： docker。
将本地镜像与docker相关联 hub上的test仓库。
push huang372/test。
新的Dockerfile文件并在文件中填写以下代码：# 第一阶段：node镜像包FROM包 node:latest AS frontend-builderWORKDIR /build-appCOPY . .RUN npm installRUN npm run build# 第二阶段：nginx包装FROM nginx:latestEXPOSE 80WORKDIR /app# COPY替换nginx nginx.conf /etc/nginx/conf.d/default.conf# 将第一阶段的静态文件复制到nginxRUN rm -rf /usr/share/nginx/htmlRUN mkdir /usr/share/nginx/htmlCOPY --from=frontend-builder /build-app/dist /usr/share/nginx/html# 运行CMD ["nginx", "-g", "daemon off;"]。-d。# docker包装镜像 build -t docker-vue:latest .。
实施后，可以通过ip:port访问docker上部署的项目。
，然后按要求输入用户名和密码。使用webpack或vite创建vue项目༌并完成开发。
:latest。
第二阶段是替换nginx中的相关文件，替换是第一阶段打包的静态文件。-p。镜像可以在docker中运行c;命令为： docker。
将本地镜像与docker相关联 hub上的test仓库。
