vue-cli npm run build我踩过的两个坑和优化打

写在前面：

npm run build 是vue-cli用来打包项目的命令行，这里记录了我关于vue-cli打包的一些常见的坑，详细的记录我所踩过的坑和解决方法。

第一个坑：文件引用路径

命令行：

//直接打包
npm run build

但是打包完成后，打开dist/index.htmnl文件整个网页都是一片空白的。

image.png

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

爬坑：

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

更改assetsPublicPath属性：

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

assetsPublicPath:'/'//false
assetsPublicPath:'./'//true

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

改好设置后重新打包，你就会得到你想要的页面

错误原因

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

第二个坑：路由history模式。

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

image.png

打包之前的样子：

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

image.png

打包之后的样子：

image.png

解决方式：

// mode: 'history',//将这个模式关闭就好

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

Gzip 文件压缩

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

设置方法：

image.png

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

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

打开这个配置会之后对整体的打包体积也就是dist文件夹并没有太大的变化。下图来看看他的压缩率以及对加载的提升，可以说是非常大且明显的，大家可以自己试一下就知道多好用了。

image.png

Vue打包后出现一些map文件的解决方法

问题：

可能很多人在做vue项目打包，打包之后js中，会自动生成一些map文件，怎么把它去掉不要呢？ 运行 cnpm run build 开始打包后会在项目目录下自动创建dist目录，打包好的文件都在其中 。

解决方法：

productionSourceMap:false   //把这个改为false。

找到

image.png

不然在最终打包的文件中会出现一些map文件，map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。

有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

最后你在build之后，然后就会发现就没有自动生成一些map文件了。。。