Vue开发中遇到的坑（总结）

1.fs.readFile读数据，解析不出json文件。
1）问题描述：


2）解决办法：


3）总结：有可能是node的版本差异，导致原先的写法出现解析不到json文件：

原来的写法：

let http = require('http');
let fs = require('fs');
let url = require('url');
let sliders = require('./sliders');

// 读数据方法
function read(cb) {
  fs.readFile(‘./book.json’, 'utf8', function (err, data) {
    if (err || data.length === 0) {
      cb([]);  // 如果有错误，或者读出来的文件长度为0，就返回空数组。
    } else {
      cb(JSON.parse(data));  // 将读出来的内容转化为对象
    }
  })
}

现在的写法：

let http = require('http');
let fs = require('fs'),
  path = require('path');      // 这里要加一个path
let url = require('url');
// 获取轮播图接口  /sliders
let sliders = require('./sliders');

// 读数据方法
function read(cb) {
	//          主要是下面这一行文件路径的写法
  fs.readFile(path.join(__dirname, 'book.json'), 'utf8', function (err, data) {
    if (err || data.length === 0) {
      cb([]);  // 如果有错误，或者读出来的文件长度为0，就返回空数组。
    } else {
      cb(JSON.parse(data));  // 将读出来的内容转化为对象
    }
  })
}

2.vue项目真机测试

1）有时候我们在vue真机测试的时候，希望通过IP地址第访问页面。
2）比如：192.168.1.105:8080 但是发现打不开，无法访问
3）这是因为前段项目是通过webpack-dev-server启动的。而它默认不支持通过ip地址访问。这时候就需要对package.json中的配置项做修改。
4）然后我们就可以通过手机输入IP地址来测试项目了。

3.前后端联调

一般我们前端都是在mock文件里放一些假数据来进行调试，但真正在世纪项目中，在和后端进行联调的时候，后端给的是api接口。
这时候，我们就可以使用vue提供的一个代理配置来进行前后端联调了。

4.安卓手机上真机测试白屏的问题解决

主要是因为有些安卓手机浏览器不支持promise，可以引入一个插件来解决。

cnpm install babel-polyfill --save

在main.js里面引入
import ‘babel-polyfill’

5.异步组件实现按需加载

我们每次访问一个页面的时候，如果不采取按需加载资源文件（css和js），就会造成页面访问速度变慢，因为它会一次性加载所有项目资源。这时候，就需要用异步组件的方式，实现按需加载了。

但是前提是：app.js很大的时候采用这种方法。

原来的方式

现在的方法（按需加载）

6.解绑全局事件

mounted() {  
      window.addEventListener('scroll', this.handleScroll)
    },
unmounted() {
      // 解绑全局事件，否则会在所有页面都触发这个事件，这就需要解绑。
      window.removeEventListener('scroll', this.handleScroll)
    }