vue-cli 本地开发mock数据使用方法 - 简书
vue-cli 本地开发mock数据使用方法
vue-cli 中可以通过配置 proxyTable 解决开发环境的跨域问题，具体可以参考这篇文章：
如果后端接口尚未开发完成，前端开发一般使用mock数据。mock方法有多种多样，这里给出两种：
方法一： 使用express搭建静态服务
mock数据写在json文件中，proxyTable 里将接口代理到具体mock数据json文件上。具体方法：
创建 mock 文件夹
build/dev-server.js 中添加如下代码
npm run dev 启动后，可以通过
访问数据，proxyTable对应设置代理即可（代理设置方法与解决跨域方法相似）
使用 JSON Server 搭建 Mock 服务器
是一个创建伪RESTful服务器的工具，具体使用方法可以看官方文档，这里直接讲在vue-cli 中的用法。
全局安装 $ npm install -g json-server
项目目录下创建 mock 文件夹
mock 文件夹下添加 db.json 文件，内容如下
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
"profile": { "name": "typicode" }
package.json 添加命令"mock": "json-server --watch mock/db.json",
"mockdev": "npm run mock & npm run dev"
启动 mock 服务器
$ npm run mock 命令 运行 mock server访问 发现 db.json 下第一级 json 对象被解析成为可访问路径
GET请求具体路径 如： 可获取数据
faker.js 批量生成伪数据
如果需要大量的伪数据，手动构造比较费时费力，可以使用
批量生成。faker.js 的具体使用参见官方文档，这里做一个示例。
$ cnpm install faker -G 全局安装 faker
mock 目录下创建 faker-data.js，内容如下module.exports = function () {
var faker = require("faker");
faker.locale = "zh_CN";
var _ = require("lodash");
people: _.times(100, function (n) {
name: faker.name.findName(),
avatar: faker.internet.avatar()
address: _.times(100, function (n) {
id: faker.random.uuid(),
city: faker.address.city(),
county: faker.address.county()
$ json-server mock/faker-data.js 在 json server 中使用 faker请求
可以获取到随机生成的100组伪数据
添加中间件
json server 使用 ，GET请求可以获取数据，POST 请求则是添加数据。在开发过程中，有时候想直接模拟获取POST请求返回结果，可以添加 express 中间件 将POST请求转为GET请求。
mock 目录下创建 post-to-get.js，内容如下module.exports = function (req, res, next) {
req.method = "GET";
启动命令添加运行中间件 --m mock/post-to-get.js"mock": "json-server --watch mock/db.json --m mock/post-to-get.js",
重新启动服务，POST请求就被转换为GET请求了
其他需求也可以通过添加不同的中间件实现。
在 config/index.js 的 proxyTable 将请求映射到
代码中添加请求以测试效果
$ npm run mockdev 启动带mock 数据的本地服务
结果如下：
整体代码：
工作的死宅，努力成为一只前端狗详解Vue-cli 创建的项目如何跨域请求
作者：WiseWrong
字体：[ ] 类型：转载 时间：
本篇文章主要介绍了详解Vue-cli 创建的项目如何跨域请求 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
问题描述：
使用 Vue-cli 创建的项目，开发地址是 localhost:8023，需要访问 localhost:9000 上的接口
分析原因：
不同域名之间的访问，需要跨域才能正确请求。跨域的方法很多，通常都需要后台配置
不过 Vue-cli 创建的项目，可以直接利用 Node.js 代理服务器，实现跨域请求
&解决方案：
接口地址原本为 /form/save，但是为了匹配代理地址，在前面加一个 /api
&如果使用了 axios，可以全局配置一个 baseURL，这样就不用挨个儿修改 url 了
axios.defaults.baseURL = '/api'
在 config&index.js 的 dev 中添加配置项 proxyTable：
proxyTable: {
target: 'http://127.0.0.1:9000/',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
其中 '/api' 为匹配项，target 为被请求的地址
因为在 ajax 的 url 中加了前缀 '/api'，而原本的接口是没有这个前缀的
所以需要通过 pathRewrite 来重写地址，将前缀 '/api' 转为 '/'
如果本身的接口地址就有 '/api' 这种通用前缀，就可以把 pathRewrite 删掉
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具88被浏览42469分享邀请回答，允许来自xxx的跨域·~~~~~~~~~~~~更新下Shortcut methods are available for all request types. These methods work globally or in a Vue instance.// global Vue object
Vue.http.get('/someUrl', [data], [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [data], [options]).then(successCallback, errorCallback);
// in a Vue instance
this.$http.get('/someUrl', [data], [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [data], [options]).then(successCallback, errorCallback);
List of shortcut methods:get(url, [data], [options])
post(url, [data], [options])
put(url, [data], [options])
patch(url, [data], [options])
delete(url, [data], [options])
jsonp(url, [data], [options])
// GET request
this.$http.jsonp('/someUrl', {xxx:"xxxx"})
.then(function (response) {
console.log(response.data)
}, function (response) {
// error callback
最后还是想吐槽一下，jsonp并不好玩，想问问你的后端是写啥的？42 条评论分享收藏感谢收起1510 条评论分享收藏感谢收起查看更多回答在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我想通过配置proxyTable，在前端解决跨域问题，vue-cli项目下的index.js是这样配置的：
页面请求代码：
接口地址为：
执行请求函数，请问为什么会出现如下报错：
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
配置没问题。 后端接口在本地的 80 端口？ 检查下请求的方法 和地址是不是有误。
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：}