本文实例讲述了vue-cli3使用mock数据的方法。分享给大家供大家参考,具体如下:

在前后端分离的开发模式中,后端给前端提供一个接口,由前端向后端发请求,得到数据后前端进行渲染。由于前后端开发进度的不统一,前端往往使用本地的测试数据进行数据渲染的测试。

正文开始

在vue-cli构建的项目,我们可以借助devServer开启一个服务,然后我们可以通过路由模拟一个接口来进行测试。

在vue-cli2和vue-cli3中的配置方式是不同的。下面分别展示

## vue-cli2

先放一张vue-cli2生成项目图片

vue-cli3使用mock数据的方法分析

mock文件夹是一个我自己创建的用来存放模拟数据的文件夹,其中有一个json文件,下面我们要对build目录下webpack.dev.conf.js进行配置

// 引入文件
const goodsList = require('../mock/goods.json');
// ……
// 配置devServer
devServer: {
  clientLogLevel: 'warning',
  historyApiFallback: {
   rewrites: [
    { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
   ],
  },
  hot: true,
  contentBase: false, // since we use CopyWebpackPlugin.
  compress: true,
  host: HOST || config.dev.host,
  port: PORT || config.dev.port,
  open: config.dev.autoOpenBrowser,
  overlay: config.dev.errorOverlay
   "htmlcode">
// 利用了axios
axios.get("/goods/list").then(res => {
    this.goodsList = res.data.result;
   }).catch(error=>{
    console.log(error);
   });

就可以请求到数据

vue-cli3

vue-cli3主打自动化,0配置。但是我们往往需要进行一些配置,这时我们就要创建一个配置文件。目录结构如下

vue-cli3使用mock数据的方法分析

vue.config.js就是我们手动创建的配置文件,完整的配置项可以在官网看到,在这里我们着重于devServer

const mockdata = require('./mock/test.json');

module.exports={
 devServer: {
  port:4000,
  before(app){
   app.get('/goods/list',(req,res,next)=>{
    res.json(mockdata);
   })
  }
 }
}

这样就达到了相同的效果

希望本文所述对大家vue.js程序设计有所帮助。

风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com