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('....
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)
}
更多推荐
所有评论(0)