创新实训——012

经过一段时间的代码编写，系统在本地已经可以运行，为了让其他组员以及演示时可用，现在需要部署。
在第一篇博客中验证过使用docker部署Vue.js前端程序是没有问题的，下面我开始进行打包部署。

docker打包部署尝试

前提条件：centos中装好了docker，并且pull了一个nginx镜像，关于安装可以去看第一篇博客。
1、在vue工程目录下，npm run build，会生成一个dist目录
2、在vue工程目录下编写Dockerfile，内容如下：
FROM nginx:latest
MAINTAINER 1115198434@qq.com
COPY dist/ /usr/share/nginx/html/
3、生成自定义镜像：docker build -t testImage . （注意这里有个点）
4、生成容器：docker run -d --name testCon -p 8081:80 testImage
-p是将容器内部nginx的80端口转发到本机的8081端口

然后就可以访问本机localhost:8081，但是这个时候令人崩溃的来了，有些样式没有生效，如下图所示：

可以看见此时下方滚动条全出来了，并且右侧表格的展开项恢复为了原格式中的白色，通过F12查看页面元素发现自定义的都没有生效，然后查阅了很多资料都没有解决；另外像自己后端的网络请求是正常的，但像第三方（百度API——用来查阅IP所处省份）这个访问不到，因为这里我用到了反向代理，具体可去第八篇博客查看。但是在前端vue配置的反向代理到了部署阶段就无法生效，需要使用nginx的反向代理，但是经过查阅各种资料，修改例如nginx.conf，nginx服务重启，都没办法生效，所以用docker部署的时候坑特别多，查阅资料还可以用GitHub、gitlab等提供的pages服务来部署，不过这些问题也会遇到。

迁移运行

既然部署vue部署不上，那也得让组员们能够运行，这里就说一下拿到外部的vue工程文件如何可以在本机运行

1、首先具备vue的开发环境（node.js）；
2、将项目中的node_modules文件夹删掉；
在文件夹下进行：
3、npm cache clean --force
4、cnpm cache clean --force，如果没有用cnpm的话这步可忽略，如果没有cnpm的话（npm install -g cnpm --registry=https://registry.npm.taobao.org）
5、cnpm install
6、npm run dev应该就能正常运行起来

此时组员们可以通过访问本机8080端口就可成功运行。