vue-cli npm run build空白页的两个坑 webpack gzip文件压缩优化打包文件

写在前面：

npm run build 是vue-cli用来打包项目的命令行，本文是关于vue-cli打包的一些常见的坑，会尽可能详细的写每一个步骤，你们能够一边看着文章，一边打包试试。有须要的朋友能够作一下参考，喜欢的能够点波赞，或者关注一下，但愿能够帮到你们。

初始化一个项目：

这里初始化一个项目，由于致使打包错误的缘由多种多样，避免由于其余设置错误干扰，从头开始打包总体步骤也会更加清晰。

命令行：

vue init webpack build1(项目名)
//吧啦吧啦进行一波设置
//进入项目文件夹
npm install复制代码

若是还不清楚如何初始化运行一个项目，能够参考我以前写的一篇文章：传送门。

开始打包踩坑

命令行：

//直接打包
npm run build复制代码

打包出来的文件

vue-cli项目文件打包位置

第一个坑：文件引用路径

如今项目咱们什么都没动，是初始化以后直接打包的状态，打开dist/index.htmnl文件整个网页都是一片空白的。

打开调试，发现有一排报错说是：不能加载到资源，后面就发现路径的问题，仔细看上面再看上面加载的css的引用路径，这里是有问题的。

爬坑：

文件位置：config文件夹/index.js文件

1.更改assetsPublicPath属性：

文件里面有两个assetsPublicPath属性，更改第一个，也就是更改build里面的assetsPublicPath属性：

assetsPublicPath:'/'//false
assetsPublicPath:'./'//true复制代码

assetsPublicPath属性做用是指定编译发布的根目录，'/'指的是项目的根目录 ，'./'指的是当前目录。

2.改好设置以后，从新打包。

打开打包文件：

从新打开index.html

错误缘由：

dist文件夹

打包出来全部的文件都会放在dist的static文件夹下面，index.html要加载文件，那么问题来了，'/'指的是项目的根目录 ，'./'指的是当前目录。要选哪一个？固然选择原谅她了。

第二个坑：路由history模式。

这个坑是当你使用了路由以后，在没有后端配合的状况下就手贱打开路由history模式的时候，打包出来的文件也会是一片空白的状况，不少人踩这个坑的时候花了不少时间，网上的教程基本上都是说的第一个坑，这个坑不多有人提起。

图片出自vue-router文档

打包以前的样子：

这里我弄了个示例，由于是刚建立的项目没有其余因素干扰，当你打开路由的history模式以后，开发的时候一切正常

打包以前的路由

打包以后的样子：

打包以后路径也是对的，可是页面一片空白

解决方式：

// mode: 'history',//将这个模式关闭就好复制代码

这里并非说不能打开这个模式，这个模式须要后端设置的配合，详情能够看：路由文档

---

Gzip 文件压缩

顺带分享一个很6的优化打包的方法，用起来也简单的很，只要下载一个插件，而后打开一个设置就行了。

设置方法：

这里实际上是webpack自带的一个优化打包的方法，打开这个配置后若是没有下载那个插件，会提示你下载，下载就行了。

而后在打包的时候，每一个js和css文件会压缩一个gz后缀的文件夹，浏览器若是支持g-zip 会自动查找有没有gz文件 找到了就加载gz而后本地解压 执行。

打开这个配置会以后对总体的打包体积也就是dist文件夹并无太大的变化。下图来看看他的压缩率以及对加载的提高，能够说是很是大且明显的，你们能够本身试一下就知道多好用了。

后话

以前本身打包的时候连着踩了很多坑，多是互相关联的，有时候你并非错了一个地方，要想一想本身其余地方是否是也是错的。上述的内容，算是本身踩坑的一些经验，但愿能够帮到你们。

最后：如需转载，请放上原文连接并署名。码字不易，感谢支持！本人写文章本着交流记录的心态，写的很差之处，不撕逼，可是欢迎指点。而后就是但愿看完的朋友点个喜欢，也能够关注一下我。
掘金我的主页

以上2017.10.10