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

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

   
   
   

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

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