vue(vue-cli+vue-router)+babel+webpack项目搭建入门（四）上线部署

vue(vue-cli+vue-router)+babel+webpack项目搭建入门<四>

本系列文章将介绍基于vue+webpack的前端项目的构建过程。文章分为四章内容，第一章介绍开发环境的部署，第二章介绍项目的构建，第三章以一个登陆-主界面的纯前端项目为示例进行实战开发，第四章介绍项目打包部署以及部署上线时可能遇到的问题。本系列文章主要介绍项目构建的流程，旨在为不了解现代前端项目开发过程的读者提供一个流程介绍，不会在一些细节上深究讲解，因此本文适合初学者使用阅读。
本系列文章中使用的配套示例代码请在示例代码下载地址进行下载。本文的实战项目可在项目在线地址进行浏览观看。
在编写本系列文章时，各框架插件版本号如下：

• nodejs v10.4.1;
• npm v6.1.0;
• vue v2.5.2;
• vue-cli v2.9.6;
• vue-router v3.0.1;
• vuex v3.1.0;
• babel v6.5.2;
• babel-polyfill v6.23.0;
• webpack v3.6.0;

• 上线部署

掌握完了前三章的读者，已经是一个很好的现代单页应用前端开发工程师。但是如果要想成为独当一面的工程师，那么开发人员还需要学会项目的环境切换、上线部署。

打包

在此之前，点客论坛的项目一直运行在本地开发环境，通过执行npm start由vue-cli为开发人员构建好本地运行环境的方式来启动。可以说这只是一个由框架为开发人员提供的“温室环境”。想要让项目脱离这个“温室”，开发人员需要将项目打包，并将项目部署到生产环境的服务器运行。
本地环境是由开发人员自己搭建和保障的，所以一定是框架和插件装备齐全的环境。而生产环境服务器中，受限于各方的因素，不一定能达到开发人员开发环境配备的框架和插件。例如，生产环境就不一定有nodejs运行环境（其实，将生产环境服务器打造成和开发环境一样，也是完全没有必要和划不来的）。所以，本章将围绕如何在nginx服务器下，进行项目上线部署（如何脱离其他环境，单通过nginx来访问项目）。
进入项目根目录D:\WebStorm\workspace\dk-bbs，在cmd命令行窗口中执行”npm run build”，该指令就是Vue项目的打包指令。