使用 Docker 搭建 Vue3 开发环境

介绍

在上一篇文章中，我们使用 Docker 搭建了 Rails6 + PostgreSQL 开发环境。

为了实现构建 Rails6 + Vue3 + PostgreSQL 环境的近期目标，下一步，让我们用 Docker 单独构建一个 Vue3 的开发环境。

一、开发环境

macOS 蒙特雷 12.3.1
码头工人 20.10.13
docker-compose 1.29.2

2. 目标

使用 Docker 搭建 Vue3 开发环境

3.主要故事

关于这次要搭建的Vue3，Docker官网上没有像之前的Rails + PostgreSQL这样的教程，所以Vue的官方网站我想一边看一边继续。

3-1. 前期准备

首先准备工作目录。

$ mkdir docker-vue
$ cd docker-vue

在您的工作目录中创建以下 Dockerfile。

Dockerfile

FROM node:16.16

RUN apt-get update -qq

WORKDIR /app
COPY . /app

CMD ["/bin/bash"]

这次创建的 Dockerfile 只是 Node.js 的基础镜像，没有安装额外的库。
另外，apt-get update 只是在更新库列表，为以后安装库做准备。
从这里开始，我们将在容器中实际执行命令的同时介绍 Vue3。

然后，如果可以启动 Vue，我们将通过在 Dockerfile 中反映命令来继续。

3-2. 启动容器

现在运行以下命令来构建映像并启动容器。

$ docker image build . -t node_sample
$ docker container run --rm -it -p 8080:8080 node_sample

-p 8080:8080是从本地8080端口连接到容器8080端口的设置。
创建一个Vue项目并设置它以确认它可以启动。

3-3.安装Vue

从这里开始，我们将在之前启动的容器中工作。
我想使用yarn安装Vue，所以首先检查是否包含yarn。

$ yarn -v
# 1.22.19

Yarn 已经安装在本次使用的 Node.js 基础镜像中。

然后，我们将沿着Vue官网进行。
根据官网，有几种安装Vue的方法，但这次我想使用CLI。

首先，运行以下命令。

$ yarn global add @vue/cli

现在安装完成了，让我们检查一下。

$ vue -version
# @vue/cli 5.0.8

3-4. 创建项目

现在我们已经安装了 Vue CLI，让我们在容器中创建一个项目。
如何创建这里这是 Vue CLI 官方：
一路上会有选项，所以选择Vue3和Yarn。

$ vue create my-project

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint)  # これを選択
  Default ([Vue 2] babel, eslint) 
  Manually select features 
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn   # これを選択
  Use NPM 

?  Successfully created project my-project.
?  Get started with the following commands:

 $ cd my-project
 $ yarn serve

您已完成创建项目。
他甚至亲切地告诉我启动项目的命令。

3-5. 启动项目

按照提示输入命令启动项目。

 $ cd my-project
 $ yarn serve

项目启动后，本地主机：8080尝试访问。
DockerでVue3の開発環境を構築する

我能够确认该项目已成功启动！万岁！

3-6. Dockerfile的修改

我对项目成功启动几乎是满意的，但在 Dockerfile 中仍有一些反映。

请按如下方式修复：

Dockerfile

FROM node:16.16

RUN apt-get update -qq && yarn global add @vue/cli # ここを修正

WORKDIR /app
COPY . /app

CMD ["/bin/bash"]

毕竟，我只是安装了 Vue，所以几乎没有什么可以修复的。

3-2. 启动容器从3-5. 启动项目(3-3.安装Vue) 再次执行，确认项目以相同方式启动。

4. 最后

当我开始认为这会更困难时，我很惊讶能够如此轻松地启动 Vue 项目。

尝试编写自己的 Dockerfile 而不查看其他人的 Dockerfile
→ 错误不断弹出，并一一解决。
→ 在解决错误的同时加深理解
也是有目的的，不过这里的效果好像很薄。

接下来要和docker-comose一起管理上次创建的Rails6 + PostgreSQL和这次创建的Vue3开发环境！

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308623893.html