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项目的打包指令。

在这里插入图片描述
一段时间的执行之后，指令执行完成。此时观察项目文件目录结构，发现多了一个dist文件夹，进入该文件夹，将会看到如下两个文件，这两个文件就包含了整个项目中设计的所有代码。这就是框架为开发人员提供的“模块化开发-打包压缩部署”的过程：
在这里插入图片描述
有兴趣的读者可以深入观察这些文件内的内容，框架已经使用一定的机制将整个项目打包成了很简单的几个文件结构。
其实dist中的代码结构就是早期传统的web项目结构：以index.html作为入口文件，然后通过外链形式引入js、css等静态资源文件。经过打包后的dist文件夹内的文件也是这样的。但是此时双击index.html并不能像传统的前端项目一样成功打开页面，因为index.html中使用了相对路径引入静态资源文件，项目仍然依赖一个服务器（nginx）。

部署

本文不再过多介绍Nginx服务器，读者可前往Nginx相关网站进行学习。如果要继续跟随本文进行下面的操作，读者需要自行安装好Nginx服务器。
让我们将打包好的项目代码部署到nginx服务器下。首先进入nginx根目录，进入"nginx根目录\html"文件夹，新建一个文件夹名为“dkbbs”，该文件夹将作为点客论坛前端资源的存储目录。将上一节打包出的dist文件夹中的两个文件（index.html和static文件夹）复制到"nginx根目录\html\dkbbs"目录下，如下图所示：
在这里插入图片描述
接着，修改nginx配置文件nginx.conf，这个文件的位置为"nginx根目录\conf\nginx.conf"。在配置文件中加入对“dkbbs”资源的配置，nginx.conf中相关的部分配置代码如下：

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        root   html;

        location / {
            index  index.html index.htm;
        }

        location /dkbbs {
            index  index.html index.htm;
        }	
}

上述配置文件中，server指示nginx服务器启动之后，创建一个进程来处理http服务。该服务监听的端口号（listen）为80端口。使用location配置指示nginx在处理"/dkbbs"的请求时，默认开启index.html页面。
完成以上操作后，启动nginx服务器，用浏览器打开对应的url（本机上是：http://localhost:80/dkbbs ），就可以成功的访问点客论坛项目。

线上问题

如果按照前面的描述进行项目部署，此时打开的页面一定是下图所示的一片空白：
在这里插入图片描述

页面加载失败

打开浏览器控制台可以发现，所有静态资源的加载都失败了。点击其中一项，查看其uri为http://localhost/static/css/app.7d974a3c7d65acc75ccb2e2797d4f939.css。仔细观察这个uri，可以发现，这个文件的uri是错误的，正确的uri应该是http://localhost/dkbbs/static/css/app.7d974a3c7d65acc75ccb2e2797d4f939.css，部署在nginx中的项目在加载静态资源时少了"/dkbbs"这个路径。
引起这样的原因是因为，项目中关于静态资源挂载路径的配置出现了问题，需要修改项目开发环境的配置文件。打开D:\WebStorm\workspace\dk-bbs\config\index.js文件，在其中找到build属性，其中有一项assetsPublicPath的属性，其默认值为’/’：
在这里插入图片描述
需要将assetsPublicPath的属性修改为’./’，才可以保证加载路径正确。这是因为打包项目代码和static文件夹之间还隔着一层dist文件夹，默认的’/’将引起资源使用绝对路径去加载，所以需要使用’./’来正确导航。修改后的代码如下图所示：
在这里插入图片描述
完成这项修改之后，让我们重新打包项目。在项目根目录执行npm run build指令，dist文件夹内的文件将会被自动替换成新打包出的文件。然后，手动替换"nginx根目录\html\dkbbs"路径下的项目代码，将他们换成dist目录中新打包出来的代码文件。重新访问（清空缓存访问）页面地址“http://localhost:80/dkbbs ”，终于，点客论坛的页面成功的显示在浏览器上：
在这里插入图片描述

图片加载失败

祸不单行。虽然我们已经成功的看到了点客论坛的登录界面，但是这个项目真的部署100%成功了吗？当我们进入404页面的时候，意外的发现：本应该出现用来提示用户的图片并没有加载成功：
在这里插入图片描述
点击该图片，查看其uri为“http://localhost/static/img/404.png ”。这是因为我们开发时在NotFound.vue中使用了绝对路径的字符串形式去引用了图片资源picUrl:"/static/img/404.png"，在项目打包之后，绝对路径就引起了读取失败，绝对路径将直接和页面地址拼接，而不会加上资源目录部分。对于这种情况，只要修改图片uri就可以修复，将NotFound.vue中的picUrl修改为使用相对路径”static/img/404.png”。
重新打包项目，再替换nginx中的代码文件。重新打开页面。这次，整个项目终于完美的呈现在了浏览器当中：
在这里插入图片描述

总结

最后，让我们来总结一下本章中，我们做了些什么：
1.在项目根目录执行npm run build打包项目；
2.将打包文件（dist目录下的所有文件）部署到nginx对应的资源路径下；
3.配置nginx服务器，支持访问项目；
4.启动nginx，访问页面；
5.解决代码中因相对路径和绝对路径引起的加载失败，重新打包项目，重新部署到nginx目录下；
6.成功访问页面；
至此，基于Vue和webpack的前端单页应用-“点客论坛”就正式交付完成了！

在整个《vue(vue-cli+vue-router)+babel+webpack项目搭建入门》系列文章的学习过程中，各位读者掌握了nodejs+npm环境下的前端开发环境搭建。尝试了使用基于vue、vue-cli、vue-router、vuex技术栈进行前端单页应用开发。开发过程中，和语法转义工具babel和模块化构建工具webpack相处融洽。最终通过nginx服务器成功的部署交付了整个项目。是时候庆祝一下自己的成长了！