详细解释在vue-cli项目中使用json-sever构建的模拟服务器

在vue-cli下配置json-server

用json-server实现后台数据接口

首先创建一个json文件：db.json放在build/

在build/dev-server.js中配置(注意变量命名)

Github描述：

启动项目地址栏，输入localhost:8081

服务已成功启动。在8081之后，添加相应的后缀来访问数据

localhost :8081/帖子

localhost :8081/评论

最后，按照如下方式进行浏览器代理设置config/index.jsr

最后验证一下

把花撒完=-=

json-server的全局安装

Npm install json-server -g在项目目录下创建模拟文件夹，并在文件夹下创建db.json文件

{ ' slides ' :[{ ' src ' : '/static/img/right 1 . png '，' title': 'xxx1 '，' href': '#' }，{ ' src ' : '/static/img/right 2 . png '，' title': 'xxx2 '，' href': '#' }，{ ' src ' : '/static/img/right 3 . png

找到package.json文件夹，写两个命令：

mock ' : ' JSON-server-watch mock/db . JSON '，' mockdev': 'npm运行mock npm运行dev '

我这里只写了一个，其实可以用一两个，写两个可以直接一起执行两个命令

如果npm run mockdev始终处于侦听db.json的状态，建议使用两个命令分别在两个命令行中执行，这是可以避免的

在config/index.js中设置代理：

主要是将请求映射到http://localhost:3000

注意：如果此时您的服务已经启动(npm已经运行开发)，您需要重新启动服务

在设置代理之前，您可以测试是否可以启动模拟服务器

运行npm运行模拟，然后访问http://localhost:3000。json对象存在于页面中，可以被访问。

Axios可用于请求页面中的数据

，示例：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。