VUE中前端mock假数据的办法

使用vue-cli脚手架工具之后生存的目录下找到config\index.js文件

替换其中dev字段的代码：    

dev: {                 // Paths     assetsSubDirectory: 'static',     assetsPublicPath: '/',     proxyTable: {       '/api': {         target: 'http://localhost:8081/',  // 通过本地服务器将你的请求转发到这个地址         changeOrigin: true,  // 设置这个参数可以避免跨域         pathRewrite: {           '/api': '/'         }       },     },     // Various Dev Server settings     host: 'localhost', // can be overwritten by process.env.HOST     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined     autoOpenBrowser: false,     errorOverlay: true,     notifyOnErrors: true,     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-      // Use Eslint Loader?     // If true, your code will be linted during bundling and     // linting errors and warnings will be shown in the console.     useEslint: true,     // If true, eslint errors and warnings will also be shown in the error overlay     // in the browser.     showEslintErrorsInOverlay: false,      /**      * Source Maps      */      // https://webpack.js.org/configuration/devtool/#development     devtool: 'cheap-module-eval-source-map',      // If you have problems debugging vue-files in devtools,     // set this to false - it *may* help     // https://vue-loader.vuejs.org/en/options.html#cachebusting     cacheBusting: true,      cssSourceMap: true   }, 

 然后找到build\webpack.dev.conf.js文件 在末尾添加代码：

const express = require('express') var apiServer = express() var bodyParser = require('body-parser') apiServer.use(bodyParser.urlencoded({ extended: true })) apiServer.use(bodyParser.json()) var apiRouter = express.Router() var fs = require('fs') apiRouter.route('/:apiName')   .all(function (req, res) {     fs.readFile('data.json', 'utf8', function (err, data) {       if (err) throw err;       var data = JSON.parse(data)       if (data[req.params.apiName]) {         res.json(data[req.params.apiName])       }       else {         res.send('no such api name')       }     })   }) apiServer.use(apiRouter); apiServer.listen(8081, function (err) {   if (err) {     console.log(err)     return   }   console.log('Listening at http://localhost:' + (8081) + '\n') })

最后在更目录下新建data.json文件即为数据接口：

{   "ratings": [     {       "username": "3******c",       "rateTime": 1469281964000,       "deliveryTime": 30,       "score": 5,       "rateType": 0,       "text": "不错,粥很好喝,我经常吃这一家,非常赞,以后也会常来吃,强烈推荐.",       "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",       "recommend": [         "南瓜粥",         "皮蛋瘦肉粥",         "扁豆焖面",         "娃娃菜炖豆腐",         "牛肉馅饼"       ] 	}   ] }