vue 开发中报错点【一】

本页目录：

定时器问题

打包后生成 .map文件的问题

fastClick的300ms延迟解决方案

查看打包后各文件的体积

路由懒加载（也叫延迟加载）

首屏加载速度很慢

CSS的coped私有作用域

创建项目时，项目名不能够有大写字母

如何刷新当前组件页面？

vue使用webPack打包发布后页面显示空白

定时器问题:

我在a页面写一个定时，让他每秒钟打印一个1，然后跳转到b页面，此时可以看到，定时器依然在执行。这样是非常消耗性能的。如下图所示：

1 首先我在data函数里面进行定义定时器名称：

data() {            
    return {                              
        timer: null  // 定时器名称          
    }        
},

2 然后这样使用定时器this.timer = setInterval()
3 最后在beforeDestroy()生命周期内清除定时器：

beforeDestroy() {
    clearInterval(this.timer);        
    this.timer = null;
}

打包后生成 .map文件的问题

项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。而生成的.map后缀的文件，就可以像未加密的代码一样，准确的输出是哪一行哪一列有错可以通过设置来不生成该类文件。

但是我们在生成环境是不需要.map文件的，所以可以在打包时不生成这些文件：在config/index.js文件中，设置productionSourceMap: false,就可以不生成.map文件：

fastClick的300ms延迟解决方案

开发移动端项目，点击事件会有300ms延迟的问题。

1.安装:

cnpm install fastclick -S

2.在main.js中引入和初始化:

import FastClick from 'fastclick'; // 引入插件
FastClick.attach(document.body); // 使用 fastclick

查看打包后各文件的体积

如果你是vue-cli初始化的项目，会默认安装webpack-bundle-analyzer插件，该插件可以帮助我们查看项目的体积结构对比和项目中用到的所有依赖。也可以直观看到各个模块体积在整个项目中的占比。

npm run build --report 
// 直接运行，然后在浏览器打开http://127.0.0.1:8888/即可查看

记得运行的时候先把之前npm run dev开启的本地关掉

路由懒加载（也叫延迟加载）

路由懒加载可以帮我们在进入首屏时不用加载过度的资源，从而减少首屏加载速度

路由文件中，非懒加载写法：

import Index from '@/page/index/index';
export default new Router({  
    routes: [    
        { 
            path: '/', 
            name: 'Index',     
            component: Index 
        }
    ]
})

路由懒加载写法：

export default new Router({
  routes: [    
        { 
            path: '/', 
            name: 'Index', 
            component: resolve => require(['@/view/index/index'], resolve) 
        }
   ]
})

首屏加载速度很慢

决这个问题非常有效的手段之一就是前后端开启gizp（其他还有缓存、路由懒加载等等）。gizp其实就是帮我们减少文件体积，能压缩到30%左右，即100k的文件gizp后大约只有30k。

vue-cli初始化的项目中，是默认有此配置的，只需要开启即可。但是需要先安装插件：

cnpm i compression-webpack-plugin

然后在config/index.js中开启即可:

build: {
    ………………
    productionGzip: true, // false不开启gizp，true开启
    ………………
}

具体实现就是如果客户端支持gzip，那么后台后返回gzip后的文件，如果不支持就返回正常没有gzip的文件。

注意：这里前端进行的打包时的gzip，但是还需要后台服务器的配置。配置是比较简单的，配置几行代码就可以了，一般这个操作可以叫运维小哥哥小姐姐去搞一下，没有运维的让后台去帮忙配置。

CSS的coped私有作用域

大家都知道当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。

可能会导致速度慢，解决：

在你的样式里，进来避免直接使用标签，取而代之的你可以给标签起个class名。

创建项目时，项目名不能够有大写字母

vue init webpack 项目名

如何刷新当前组件页面？

this.$router.push(0)

vue使用webPack打包发布后页面显示空白

打包命令：npm run build

这是因为index.html中引入的css ,js 的路径不对:如下图：

这个是因为webpack打包的时候引入js时使用的是绝对路径导致的，

修改webpack打包文件中的配置，

在webpack.prod.conf.js中增加publicPath:'./' ,

util.js中增加publicPath:'./'，

修改config/index.js

修改完后：重新打包