简介
vue-cli-plugin-dockerize 是一个 vue-cli 插件，它将帮助您通过 Docker 构建和部署您的 Vue.js 应用程序。本文将向您介绍如何使用此插件来构建 Docker 镜像，并将其部署到 Docker 容器中。
安装
首先，我们需要安装 vue-cli-plugin-dockerize。您可以通过以下命令安装：
npm install vue-cli-plugin-dockerize --save-dev
使用
使用 vue-cli-plugin-dockerize 很简单。首先，确保您的 Vue.js 项目是通过 vue-cli 创建的。如果您的项目还没有使用 vue-cli 创建，请使用以下命令创建一个新项目：
vue create my-project
接下来，进入项目目录，然后运行以下命令：
vue add dockerize
接下来，您将被要求输入一些配置信息，比如 Docker 镜像名称和版本号等。按照提示输入完毕后，需要修改以下两个文件：
Dockerfile: 它是 Docker 镜像的配置文件，您需要为您的应用程序设置正确的环境变量。docker-compose.yml: 它是部署 Docker 容器的配置文件。您需要将其中的一些变量设置为正确的值。
修改完毕后，运行以下命令：
docker-compose up
等待命令执行完成后，您的 Vue.js 应用程序将已经构建成功，并且在 Docker 容器中运行。
示例
我们使用一个简单的示例来演示如何使用 vue-cli-plugin-dockerize。
首先，创建一个新的 Vue.js 项目：
vue create my-project
接下来，进入项目目录，并安装 vue-cli-plugin-dockerize：
cd my-project npm install vue-cli-plugin-dockerize --save-dev
然后，运行以下命令添加 vue-cli-plugin-dockerize：
vue add dockerize
在添加完毕后，您将被要求输入一些配置信息，比如 Docker 镜像名称和版本号等。按照提示输入完毕后，打开 Dockerfile，修改其中的环境变量为以下内容：
ENV VUE_APP_TITLE "My Dockerized Vue.js App"
接着，在 docker-compose.yml 文件中，将 PORT 的值设置为 8080，然后保存文件。
修改完毕后，运行以下命令启动 Docker 容器：
docker-compose up
在命令执行完成后，您的 Vue.js 应用程序将已经构建成功，并在 Docker 容器中运行。现在，您可以在 Web 浏览器中打开 http://localhost:8080，查看您的应用程序是否正常运行。
结论
通过本文，您已经学习了如何使用 `vue-cli
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5451ab1864dac66976