Docker 部署 Visual Studio 2019配置vue项目（Docker部署静态网页）Docker+nginx

最新推荐文章于 2024-09-06 15:37:04 发布

原创

最新推荐文章于 2024-09-06 15:37:04 发布 · 2.2k 阅读

4 ·

CC 4.0 BY-SA版权

本文详细介绍如何使用Docker和nginx部署Vue项目，包括构建、镜像制作、推送至私有镜像服务器及运行容器的全过程。

本文承接《Visual Studio 2019配置vue项目》,在《Visual Studio 2019配置vue项目》里面我们进入项目文件下打开dos窗口输入 npm run serve 命令，这是开发环境调试用的指令，这样可以在开发时打开本地调试站点。我们既然用到了 Visual Studio 2019 这个工具，那么就用懒人（使用vs都会让开发人员变懒）方式来发布这个Vue项目。这次我们不用IIS，我们用比较新的容器技术来部署这个静态网站（全静态页面html+css+js、无asp、aspx、cshtml、jsp、php等服务器页面）。

1，先发布到本地

使用VS2019 打开 MyVue\VuejsApp1这个项目，右键项目管理-->在此处打开命令提示符

运行 npm run build

F:\GitHub_Code\MyVue\VuejsApp1> npm run build

> vuejs-app1@1.0.0 build F:\GitHub_Code\MyVue\VuejsApp1
> vue-cli-service build


|  Building for production...

 DONE  Compiled successfully in 1077ms                                                                          18:08:45

  File                                 Size               Gzipped

  dist\js\chunk-vendors.d9eb519d.js    61.78 kb           22.17 kb
  dist\js\app.43e89baa.js              2.75 kb            1.30 kb

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

已经生成了可以发布的文件了 dist 就是发布的根目录。