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)
    }
Logo

前往低代码交流专区

更多推荐