vue2.5.2中配置mock数据(二)

前端开发:利用mock数据与webpack-dev-server
本文介绍了一种在前端开发中使用mock数据的方法。通过在static目录下创建mock文件夹存放json数据,并利用webpack-dev-server的代理功能进行配置,可以在开发阶段模拟API请求,便于组件的数据调用和测试。
方法二

1、在static目录下新建一个mock文件夹,将json数据放在此文件夹下。因为只有static目录下的文件才能被外部访问到

2、在config/index.js文件中,使用webpack-dev-server工具提供的代理,可如下设置:

3、在组件中调取数据

效果展示:

转载于:https://juejin.im/post/5ae1423f518825670a0ffce0

{ "name": "meadia-manage", "version": "1.0.0", "description": "A Vue.js project", "author": "winspread", "private": true, "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js" }, "dependencies": { "axios": "^0.18.0", "echarts": "^4.2.1", "element-ui": "^2.15.10", "moment": "^2.29.4", "vue": "^2.5.2", "vue-puzzle-vcode": "^1.1.9", "vue-router": "^3.0.2", "vuex": "^3.1.0" }, "devDependencies": { "autoprefixer": "^7.1.2", "axios-mock-adapter": "^1.16.0", "babel-core": "^6.22.1", "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-loader": "^7.1.1", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-vue-jsx": "^3.5.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "chalk": "^2.0.1", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.28.0", "element-theme-chalk": "^2.15.10", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^2.30.1", "mockjs": "^1.0.1-beta3", "node-notifier": "^5.1.2", "node-sass": "^6.0.1", "optimize-css-assets-webpack-plugin": "^3.2.0", "ora": "^1.2.0", "portfinder": "^1.0.13", "postcss-import": "^11.0.0", "postcss-loader": "^2.0.8", "postcss-url": "^7.2.1", "rimraf": "^2.6.0", "sass-loader": "^10.2.0", "semver": "^5.3.0", "shelljs": "^0.7.6", "uglifyjs-webpack-plugin": "^1.1.1", "url-loader": "^0.5.8", "vue-loader": "^13.3.0", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.5.2", "webpack": "^3.6.0", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-server": "^2.9.1", "webpack-merge": "^4.1.0" }, "engines": { "node": ">= 6.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }
04-01
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值