vue-cli脚手架配置json-server

责编:menVScode 2018-02-05 23:13 阅读(1496)

1、安装 json-server

npm install json-server --save

2、根目录下创建要模拟数据的文件 db.json

{
  "getNewsList": [
    {
      "id": 1,
      "title": "新闻条目1新闻条目1新闻条目1新闻条目1",
      "url": "http://starcraft.com"
    }
  ],
  "login": {
    "username": "yudongdong",
    "userId": 123123
  },
  "getOrderList": {
    "list": [
      {
        "orderId": "ddj123",
        "product": "数据统计",
        "version": "高级版",
        "period": "1年",
        "buyNum": 2,
        "date": "2016-10-10",
        "amount": "500元"
      }
    ]
  }
}

2、在 package.json 文件中的script对象中添加如下命令,启动项目的是可以打开两个终端,分别跑:npm run dev 和 npm run mock;或者直接跑一个命令:npm start。

"mock": "json-server --watch db.json",
"start": "npm run mock & npm run dev"

3、在 config/index.js 文件中的dev对象里设置代理:

proxyTable: {
    '/api': {
        target: 'http://localhost:3000/', // 通过本地服务器将你的请求转发到这个地址
        changeOrigin: true, // 设置这个参数可以避免跨域
        pathRewrite: {
          '/api': '/'
        }
    }
}

4、运行命令:npm run dev 和 npm run mock

QQ截图20180206190554

在浏览其中输入:http://localhost:3000/,结果如下

QQ截图20180206190640

        注:只支持get方式获取数据,post方式存在问题。

标签: json-server vue-cli
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码