vue/cli 3.0 与 2.0脚手架怎样mock数据

2.0 设置

起首，在这个版本是只要我们的 static 目次下的文件是能够被接见到的，所以我们就把静态文件放入该目次下。

// 静态数据寄存的位置
static/mock/home.json

我们启动项目以后平常项目会启动在 8080 端口，假如不是修改下对应端口号即可，我们接见下面地点：

http://localhost:8080/static/mock/index.json

我们能够看到我们的数据是能够要求到的，以后我们只须要在项目中 config/index.js 增加以下属性：

dev: {
    // Paths fiddler charles
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {
          '^/api': '/static/mock'
        }
      }
    }
}

以后我们在项目中运用即可，我们就可以猎取我们须要的数据。

axios
 .get('/api/index.json')
 .then(this.handler)

3.0 设置

由于 static 目次移除，我们把静态文件放入 public 文件下。

// 静态数据寄存的位置
public/mock/home.json

和上面一样，启动项目后我们看看数据能不能正常被接见。

http://localhost:8080/mock/home.json

以后，差别的处所在于，我们须要手动建立一个 vue.config.js 文件放在根目次下。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/mock'
        }
      }
    }
  }
}

设置完成以后，我们也是和上述一样，在项目中直接接见数据即可。

axios
 .get('/api/home.json')
 .then(this.handler)