Vue项目打包以及Docker部署

1. 将Vue项目打包成静态文件

1. 修改文件utils.js

文件路径： bulid >> utils.js
操作：修改publicPath字段

utils.js

2. 修改文件index.js

文件路径： config >> index.js
操作：修改assetsPublicPath和productionSourceMap字段

index.js

3. 在控制台终端输入 yarn run build, 打包静态文件代码

yarn run build

yarn run build

4. 打包后自动生成文件夹dist（其中index.html为入口文件）

dist文件夹

2. 安装docker

curl https://get.docker.com > /tmp/install.sh
cat /tmp/install.sh
...

chmod +x /tmp/install.sh
/tmp/install.sh
...

3. dokcer部署

1. 先将刚才生成的静态文件复制到l需要部署的linux主机上

2. 寻找镜像

docker search nginx

寻找镜像

3. 下载镜像

docker pull nginx

下载镜像

4. 查看本地镜像

docker images

查看本地镜像

5. 启动容器

--name 指定容器的主机名
-p 指定容器暴露的端口
-d 容器后台运行
-v 给容器挂载存储卷，挂载到容器的某个目录

启动容器

6. 进入容器

进入容器

7. 安装vim工具

安装vim工具

8. 编辑nginx配置文件

编辑nginx配置文件

原配置文件

原配置文件

修改后的配置文件

修改后的配置文件

9. 测试nginx配置文件是否修改成功

nginx -t

10. 重启nginx

nginx -s reload

重启nginx

此时可以正常访问，表示修改成功。