Vue项目中经常碰到的痛点和解决方法(下)

rem文件的导入问题

移动端最让人头疼的就是手机的适配问题，而rem是根据html的font-size的大小来计算的，我们适配的一个方法就是写一个rem.js根据html的尺寸计算font-size的大小。

;(function(c,d){var e=document.documentElement||document.body,a="orientationchange" in window?"orientationchange":"resize",b=function(){var f=e.clientWidth;e.style.fontSize=(f>=750)?"100px":100*(f/750)+"px"};b();c.addEventListener(a,b,false)})(window);

直接在main.js中引入，import '../utils/rem,根据你自己的文件路径修改。

定时器

定时器是我们一个很常见的业务场景，但是当你跳到另一个页面的时候可以在控制台打印你就知道它还一直在计时，非常消耗性能。

data() {

return {

timer: null // 定时器名称

}

},

使用定时器

data() {

return {

timer: null // 定时器名称

}

},

清除定时

beforeDestroy() {

clearInterval(this.timer);

this.timer = null;

}

这样写的确没什么大毛病，引用尤雨溪的话来说它需要在这个组件实例中保存这个 timer，如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题，但是它可以被视为杂物。

打包后.map文件很大

项目打包过程中，代码都是经过压缩的，如果报错的话，你是找不到具体是哪个js或者页面报错的，而生成的map后缀的文件，就像是没有打包过的代码一行一列都很清楚，可以显示哪里有错在确保没错误的情况下，可以配置不生成这类文件：

在config/index.js文件中，设置productionSourceMap: false,就可以不生成.map文件。

productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。

vue这种单页应用，第一次由于一次性加载所有资源，所以第一次加载速度很慢。解决这个问题非常有效的手段之一就是前后端开启gizp（其他还有缓存、路由懒加载等等）。gizp其实就是帮我们减少文件体积，能压缩到30%左右，即100k的文件gizp后大约只有30k。

安装compression webpack plugin

npm i -D compression-webpack-plugin

在vue.config.js中配置

configureWebpack: config => {

if(process.env.NODE_ENV =='PRODUCTION'){

return{

plugins:[new CompressionPlugin({

test:/\.js$|\.html$|\.css/, //匹配文件名

threshold:10240, //对超过10k的数据进行压缩

deleteOriginaAssets:false //是否删除源文件

})]

}}

},

在config/index.js中开启

productionGzip: true, // false不开启gizp，true开启

这里所说的是前端的处理和配置，还需要后端的小伙伴简单处理配置一下。

打包之后路径找不到的问题

打包的配置文件在vue.config.js

这个配置就是打包之后的资源的公共路径，默认的值是‘/’，就是跟路径下，所以打包后的资源路径为根目录下的static。由此问题来了，如果你打包后的资源没有放在服务器的根目录，而是在根目录下的pages等文件夹的话，那么打包后的路径和你代码中的路径就会有冲突了，导致资源找不到。

为了解决这个问题，你可以把默认的路径更改为‘./‘相对路径。但是这样背景图的路径会出现一些问题,因为此时的相对就变成了static/css/文件夹下的static/img/xx.jpg，但是实际上static/css/文件夹下没有static/img/xx.jpg，即static/css/static/img/xx.jpg是不存在的。背景图是loader解析的，所以在loader的配置中修改，打开build文件夹下的utils文件夹，找到exports.cssLoaders的函数，在函数中找到对应下面这些配置publicPath:'../../',再打包就可以了