美文网首页
vue-cli配置mock数据

vue-cli配置mock数据

作者: 疯狂的冰块 | 来源:发表于2018-02-21 20:11 被阅读87次

旧版本vue-cli参考如下文章:
【最简单版】vue-cli项目中怎么mock数据

因为最新版本的vue-cli已经放弃dev-server.js,只需在webpack.dev.conf.js配置就行
新版vue-cliwebpack.dev.conf.js配置如下:

原文地址:
vue-cli的build的文件夹下没有dev-server.js文件,怎么配置mock数据

在const portfinder = require(‘portfinder’)后添加

const express = require('express')
const app = express()
var appData = require('../mock/goods.json')//加载本地数据文件
var apiRoutes = express.Router()
app.use('/api', apiRoutes)

//然后文件中找到devServer,在里面添加

 before(app) {
      app.get('/api/appData', (req, res) => {
        res.json({
          errno: 0,
          data: appData
        })//接口返回json数据,上面配置的数据appData就赋值给data请求后调用
      })
    }

然后npm run dev,一定要重启 一下!!然后就可以http://localhost:8080/api/appData 访问了

截图如下

image.png image.png image.png

相关文章

  • vue-cli配置mock数据

    旧版本vue-cli参考如下文章:【最简单版】vue-cli项目中怎么mock数据 因为最新版本的vue-cli已...

  • 仿写饿了么app之vue2.0版本笔记2

    第四部分:mock数据部分vue开发请求本地数据的配置,早期的vue-cli在bulid目录下面有dev-serv...

  • vue本地开发mock数据.md

    一、为什么要mock数据? 二、如何mock数据? 三、webpack本地代理配置 四、mockjs使用 五、ea...

  • vite2 + vue3 + vue-router4 + vue

    安装mockjs 配置mock数据 根目录下新建mock文件夹 mock文件夹下新建index.js, user....

  • vue项目代建遇坑总结

    webpack配置问题总结 1.mock数据的做法,看的项目是在webpack 1 的结构上做的mock数据。现在...

  • vue-cli项目mock发送post请求超时

    vue-template项目(采用mock模拟数据)脚手架vue-cli升级到5.X版本,更改devServer基...

  • Vue2.x实战饿了么项目笔记(一)

    mack数据 如果后端接口尚未开发完成,前端开发一般使用mock数据。注意:新版的vue-cli 自动搭建的bui...

  • mock快速上手

    1、背景 1、vue-cli新建项目 2、安装相关包 3、写demo-->初识mock数据(可去官网查看) 总结:...

  • vue-cli本地mock数据

    在dev-server.js中添加下面代码 over! 顺便提一下var router=express.Route...

  • mock数据

    Vue中的mock数据指的是什么? mock数据指的模拟数据,mock中文翻译愚弄,嘲笑。 实现mock数据如下:...

网友评论

      本文标题:vue-cli配置mock数据

      本文链接:https://www.haomeiwen.com/subject/povotftx.html