背景
目前我使用的vue项目使用vue-cli3创建,使用的webpack打包,dist文件夹+Dockerfile+nginx.conf 打镜像。
由于是三方内网部署,因此不知道对方的内网地址是什么(后端接口地址),然而vue打dist包的时候是需要先配置好后端接口地址的,导致到现场之前就打不出前端镜像,同时现场又缺少前端打包的环境。
鉴于以上因素,提出一个打包方案。
方案
1. 上传项目.tar包到服务器
2. tar xvf 项目
3. mv 解压后的项目到 /data/source/vue/ 下
4. 修改后端接口地址
5. sudo docker run --rm -it -v /data/source/vue/:/workbench prettybige/vuebuilder:0.0.1 /bin/bash
6. 如果项目依赖未安装完成,需要安装一遍依赖 [npm install]
7. npm run build [yarn build]
8. exit
9. cd /data/source/vue/项目
10. mv ./dist /要打镜像的地方
11. Dockerfile + dist + nginx.conf + docker build --> image
镜像
docker pull prettybige/vuebuilder:0.0.1