容器中搭建Vue开发环境

容器中搭建Vue开发环境

---

#20231124（操作）

1、安装Docker Node.js镜像
官网：https://hub.docker.com/_/node (需要和谐访问)
docker pull node:12.18.1-buster

2、建立基础容器
docker run -it --name=VSCoder -p 8080:8080 -v "D:/BYP/Programming/Docker/Dev/VSCode:/home/VSCode/Project" -d node:12.18.1-buster
（-d参数，退回到宿主机命令行|截图）

3、进入容器
docker exec -it VSCoder bash

4、查询系统版本
cat /etc/issue
Debian GNU/Linux 10 l

5、查看npm源
npm config get registry
结果：
https://registry.npmjs.org/
#测试npm：
npm info underscore

6、设置taobao源
npm config set registry https://registry.npm.taobao.org
#再次查看结果已经更改为taobao源：
npm config get registry
结果（截图）：
https://registry.npm.taobao.org/

7、查询状态
node -v
npm -v
结果（截图）：
v12.18.1
6.14.5

8、安装Vue Cli4等工具包
npm install -g @vue/cli@4.4.6

安装taobao源后，安装时间大大缩短（安装成功后最后显示）：
+ @vue/cli@4.4.6
added 941 packages from 569 contributors in 35.698s

9、热更新问题

注意：为了用VSCode能实现“热更新”，需要在项目文件夹增加一个文件：vue.config.js
module.exports = {
devServer: {
watchOptions: {

aggregateTimeout: 300,
poll: 1000,
},
}
};

---

VSCode的操作：

1、打开VSCode，然后点击左下角的“连接”符号（截图）;

2、然后选择“附加到正在运行的容器”（截图）;

3、VSCode会自动显示容器名称（截图）;

4、弹出新的窗口，然后选择打开文件夹，选择项目文件夹或进入终端开始新建项目。

注意“热更新问题”（见前面介绍）

---

导出导入镜像：

1、使用export打包容器
docker export -o VSCoder_byp_20231124.tar VSCoder
2、使用import导入镜像
docker import VSCoder_byp_20231124.tar vscoder_byp
（版本默认为：latest）
3、建立容器
docker run -it --name=VSCoder2 -p 8080:8080 -v "D:/BYP/Programming/Docker/Dev/VSCode:/home/VSCode/Project" -d vscoder_byp:latest bash
注意：如果没有带参数bash，就会报错（截图）：
docker: Error response from daemon: No command specified.

---