返回

Vue3 开发环境搭建（Docker 版本）

前端

作为一名前端开发人员，我们经常需要在不同的项目之间切换，而每个项目可能使用不同的技术栈和版本。为了避免环境冲突和版本不兼容问题，使用 Docker 来搭建开发环境是一个不错的选择。Docker 可以将应用程序及其依赖项打包成一个独立的容器，从而确保应用程序在不同的环境中都能正常运行。

安装 Docker

首先，我们需要在我们的机器上安装 Docker。Docker 官网提供了各种平台的安装包，我们可以根据自己的操作系统选择对应的安装包进行安装。

安装 Node.js 和 NPM

接下来，我们需要安装 Node.js 和 NPM。Node.js 是一个 JavaScript 运行时环境，而 NPM 是 Node.js 的包管理工具。我们可以使用以下命令来安装 Node.js 和 NPM：

curl -sL https://deb.nodesource.com/setup_16.x | sudo bash -
sudo apt-get install -y nodejs

安装 Vue CLI

Vue CLI 是一个用于快速创建和开发 Vue.js 项目的命令行工具。我们可以使用以下命令来安装 Vue CLI：

npm install -g @vue/cli

创建 Vue3 项目

现在，我们可以使用 Vue CLI 来创建我们的 Vue3 项目。首先，我们需要创建一个新的项目文件夹：

mkdir my-vue3-project

然后，进入这个文件夹并运行以下命令：

vue create my-vue3-project

Vue CLI 会询问我们一些关于项目的信息，例如项目名称、项目类型和包管理工具。我们可以根据自己的需要选择相应的选项。

运行 Vue3 项目

创建项目完成后，我们可以使用以下命令来运行项目：

cd my-vue3-project
npm run serve

项目运行后，我们可以通过浏览器访问 http://localhost:8080 来查看项目。

Dockerfile

为了将我们的 Vue3 项目打包成一个 Docker 镜像，我们需要创建一个 Dockerfile。Dockerfile 是一个文本文件，其中包含了构建 Docker 镜像的指令。我们可以使用以下内容创建一个 Dockerfile：

FROM node:16

WORKDIR /usr/src/app

COPY package.json ./

RUN npm install

COPY . .

CMD ["npm", "run", "serve"]

这个 Dockerfile 的作用是：

  • 基于 Node.js 16 镜像构建新的镜像。
  • 将项目的工作目录设置为 /usr/src/app。
  • 复制 package.json 文件到工作目录。
  • 运行 npm install 来安装项目依赖。
  • 复制项目的所有文件到工作目录。
  • 将 npm run serve 设置为容器的默认命令。

构建 Docker 镜像

现在，我们可以使用以下命令来构建 Docker 镜像：

docker build -t my-vue3-project .

这个命令会根据 Dockerfile 的内容构建一个名为 my-vue3-project 的 Docker 镜像。

运行 Docker 容器

最后，我们可以使用以下命令来运行 Docker 容器：

docker run -p 8080:8080 my-vue3-project

这个命令会运行一个名为 my-vue3-project 的 Docker 容器，并将容器的 8080 端口映射到宿主机