跟着Vue-cli来'学'并'改'Webpack之多环境配置和发布

Vue之因此如今如此之火热，一部分也得益于有官方的脚手架生成工具Vue-cli,大大简化了初学者环境搭建的成本，可是实际业务中咱们每每须要实现其余的功能来对webpack进行改造，本文将会根据一些实际的业务需求，先学习vue-cli生成的模版，而后在进行相关修改。

Vue-cli生成模版文件目录

├── README.md
├── build
│  ├── build.js
│  ├── check-versions.js
│  ├── logo.png
│  ├── utils.js
│  ├── webpack.base.conf.js
│  ├── webpack.dev.conf.js
│  └── webpack.prod.conf.js
├── config
│  ├── dev.env.js
│  ├── index.js
│  └── prod.env.js
├── index.html
├── package.json
├── src
│  ├── App.vue
│  ├── assets
│  │  └── logo.png
│  ├── components
│  │  └── Hello.vue
│  └── main.js
└── static
复制代码

本文主要关注的点在

build - 编译任务的代码

config - webpack 的配置文件

package.json - 项目的基本信息

具体每一行webpack的配置的含义这里就不详细介绍了，请参考 vue2.0脚手架的webpack 配置文件分析

常见需求一：多环境配置和发布

Vue-cli生成的模版，只配置了npm run dev , npm run build 这行脚本，分别去启动开发环境服务和，执行打包。 而每每正常的公司开发流程最少都会有开发、测试仿真、生产环境，而每一个环境响应的服务器请求地址，或者一些配置参数都会不一样，而且发布的时候须要发布到多台服务器上，因此须要执行自动化脚原本进行。构建和发布。

了解部署代码流程

咱们首先得弄清楚这个问题，转载一段文章，做者：郑海波，连接，来源：知乎

这个其实和vue 无关，是一个通用问题：即代码在哪里构建。若是题主的服务器指的是运行服务器，那其实两种都不是好选择。不少新人包括我工做前都觉得部署代码是这样的但实际上在较大的互联网公司会麻烦一些。如下介绍都是常见作法，并简化了一些流程，仅仅只是为了方便新人理解。代码提交到git或svn服务器注意这里是源文件，不是build后的文件2. 构建服务器会从git服务器中拉去要发布的代码版本在这里完成安装依赖，如题主的vue。并构建用于部署的文件，这些文件通常也会被压缩成一个压缩包用于管理3. 构建后的发布包会被上传到中转站：文件管理服务器集群4. 实际运行的服务器通常不会是单台，而是集群，这n台服务器会从文件服务器中拉去对应版本的相同压缩包，并解压最终运行实际上，这里有明显的先后顺序的流程在里面，若是都是手动操做的话会很是麻烦，因此通常大公司里都会有一个自动部署平台来全局统筹完成这些工做，做为开发者其实只须要点下『一键部署』就完成以上内容了如在配合gitlab、github这类提供的webhook自动通知自动部署平台，稳定版本的代码已经完成推送了（Push Event）。那咱们就连点一下按钮都不须要了。这是个典型的构建部署分离的Case，带来的好处很是多，好比确保构建的是一份代码，避免多环境构建致使不一致的可能性构建通常是个高开销的行为，可能会引发运行服务器的不稳定能够快速回滚或回复，相同版本的代码无需重构构建。。。

讲了这么多因此，打包构建并非一个简单的事情，因此须要自动化工具来配置

手动修改vue-lic的webpack的配置，结合 fjpublish 进行多环境打包发布

主要操做是把须要配置的环境变量配置到./config目录下对应的文件里面

而后启动不一样的环境进行，读取不一样的数据。小型项目可使用此构建方法，很是好用且方便。

具体的配置过程在个人另一篇文章中有介绍

传送门：Vue.js+Element-UI从0到部署:基础篇（3.前端自动化、多环境配置到发布）

Docker 容器技术

上面大公司的构建流程很复杂，基于 Docker 能够进行容器配置，本人也不太熟悉，又熟悉的朋友，能够发上连接学习学习，这里附上一篇相关软文：基于 Docker 打造前端持续集成开发环境

下一节将继续跟着跟着Vue-cli来'学'并'改'Webpack之 打包优化