json-server 模拟接口

使用 json-server 在JS项目模拟RESTful API

支持 GET POST PUT DELETE PATCH…
支持 查询、分页、排序、模糊查询、操作符…

安装方法

全局安装npm i json-server -g

或者cd <项目目录>后，作为开发依赖安装npm i json-server --save-dev

使用方法

在项目根目录新建文件SB.json

{
  "hello" : {
    "msg": "hello !!"
  }
}

启动指令json-server --watch SB.json --port 3000，启动浏览器后打开http://localhost:3000/hello就有返回数据了

可以配置到package.json，方便开启：

{
  "name": "my-project",
  "scripts": {
    "serve": "vue-cli-service serve",
    "json-server": "json-server --watch SB.json"
  }
  // ...
 }

其他参考

vue2配置代理转发

这里获取http://localhost:8080/json/hello 转发到 http://localhost:3000/hello

await this.$getJson('/json/hello')

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({

  devServer: {
    proxy: {
      '/json': {
        target: 'http://localhost:3000/',
        changeOrigin: false,
        pathRewrite: {
          '^/json': '',
        },
      },
    },
  },
})