虾米带你轻松搞定Vuejs 系列

（七）构建实战3：项目整合与优化

今天周四成都依然很冷，最近发烧感冒个人状态也不好。好了，还是继续今天的笔记吧。前面的几章笔记记录了Vue项目的构建的整体流程，从无到有的实现了单页面应用和多页面应用的配置，环境等等。今天我们回头看一下针对之前的配置是否可以有优化方案，同时也是我自己摸索的过程。

使用alias简化路径

使用webpack构建过Vue或者React的朋友们可能都知道alias的作用，其实就是把复杂的文件路径定义成一个变量或者一个标识来访问。在不适用alias的项目中，如果我们要找到一个文件，可能需要找到被引用文件的相对路径，路径就是一大堆，比如：

这个路径还好点，一旦遇到路径层次特别深的情况，可能这个相对路径就会很长，其实我看了一下vue-cli3.x的配置，我们根本就不用操心他在那里，只需要交给webpack就可以了，原生的webpack是需要做resolve，这里我们重点说一下vue.config.js中的配置。
首先引入路径依赖：

其次编写路径解决方法：

最后我们在配置中编写代码：

这里我们发现写法不一样，对的就是不一样，在webpack中直接在module.exports返回对象中做键值对的适配即可，但是vue-cli3.x脚手架帮我们把原生的webpack封装起来了，想要修改配置中的某些属性，就需要使用vue-cli3.x配置文档的要求来编写，我们首先看一下配置文档中针对alias的方法的描述。

言简意赅，再结合我们的代码来看一下，是不是一目了然，接下来我们在项目中试一下

让我们再看一下这些文件的目录结构：

修改完毕，我们来运行一下看看是不是可以正常运行呢？

没有任何问题，破费，非常正常。

开启Gzip压缩

在之前的配置介绍中，我们看到了大部分的配置，但是我们想一下，在生产环境下，我们需要针对某些东西进行压缩处理，怎么做那？用过webpack的朋友就知道了，废话不说了，此来插件很多但是我们vue推荐使用compression-webpack-plugin来开启Gzip压缩。
这里还是老生常谈。
首先引入依赖：

其次改写vue.config.js的配置：

最后运行一下UI工具来看一下压缩的情况

在看一下cmd模式的压缩

总结

本笔记完成了Vue项目构建部分的全部，从vue-cli3.x的使用到项目内外环境的配置，再从单页面应用到多页面应用。记录了vue项目的构建的主要知识点和详细流程。至此，受益颇多，想到了很多举一反三地场景。最后一句话多读多想。