在docker中搭建npm和vue框架流程以及在docker 中使用npm run dev 在本地浏览器无法显示的问题

docker中搭建npm和vue框架

最近的一个项目需要，用到vue框架。但是，我并非从事这个方向，所以，只能边学边实践。
具体步骤如下：
1.首先需要从官网下载docker镜像，网址：https://hub.docker.com/_/node

在linux系统中通过docker命令将进行拉取下来：docker pull node:12.18.1-buster（前提是需要安装docker）
2.通过docker images 可以查看来取下来的镜像（这里是两个版本），并且在当前目录下建立一个项目文件夹src

3.编辑dockerfile文件，在刚才的基础镜像中添加我们需要的东西：

4.通过运行docker命令运行dockerfile文件将目前的镜像进行重新打包成一个新的镜像（后面的点 非常重要：表示当前目录）：

4.除了添加以上的必要东西之外，由于docker是最简版的linux环境，但是缺乏很多功能，为了更加灵活编辑能力，还可以对docker进行新的设置：通过docker image ls查看当前的镜像，然后利用docker contaner XXX产生一个名字为vuecli4的新容器 ，这里需要注意一点根据目前的命令产生的容器，然后通过npm run serve 这种方式建立的vue框架可以在本地浏览器中看初始的demo网页页面，但是通过npm run dev 这种建立起来的容器 在本地页面并不能显示，需要增加新的参数（-e “HOST=0.0.0.0”）


5.这里就是进入新建立的容器中，并且查看vue 是否安装成功 以及版本号

6.通过nano 编辑文件，对容器进行配置，方便我们更好的工作（使用vim也是可以的）

在.bashrc文件中添加一下内容，这样我们更好使用ls ll l三个命令了

7.新建 .vuerc文件（如果后面的操作有关于改文件的报错，直接删除这个文件就行了，也就是说这步骤可以省略）如果你非要创建这个文件，那你只需要在改文件中添加以下几行代码即可


8. 这里主要是通过vue 创建一个项目 然后通过npm run serve 运行这个项目即可

最后我们就可以在本地输入网址就可以看到了我们项目的初始化demo了

最后，如果你想使用 npm run dev 的形式来运行一个项目首先要注意第4小点中的提示，需要增加新的参数（-e “HOST=0.0.0.0”）

然后按照一下的方式来进行创建项目，通过官网教程可以查阅。这里展示的在创建项目时的相关设置。

然后就可以进行项目开发了
总结：
本博客主要解决两个问题：
（1）关于docker中搭建vue框架的两种方式：npm run serve 和npm run dev的问题
（2）关于在docker 启动项目后 通过运行npm run dev 后 在本地浏览器中使用 192.168 xxx：xxx 无法显示的问题。方式是创建容器时需要添加参数 （-e “HOST=0.0.0.0”）