没有后端的vuejs前端开发：如何编写固定装置？

Question

我们正在构建一个应用程序，后端与前端完全分离。沟通将通过rest-api，特定端点，json等进行。

前端是使用vue-cli作为SPA vue.js应用程序（使用vuex和vue-router）开发的，后端是一个仅限Rails 5 API的应用程序。

前端和后端的开发将由不同的团队并行完成，两者都遵循相同的API。

我的问题是：前端团队如何在没有后端数据的情况下开发前端？例如，要显示用户配置文件，他们需要从后端为该用户提供相应的JSON。但由于后端未完成，请求数据的端点尚未运行。

他们应该在前端应用程序中创建灯具（例如“sample-user.json”）并在开发时使用它吗？对于这种情况，最佳做法是什么，以便开发前端不依赖于后端可用和提供数据？

Answer 1

根据我对过去项目的经验，对于小型开发周期，使用静态json文件来模拟请求的结果非常方便。我基本上在我的vuex模块中导入了所需的文件，并在我的操作中将它们用作假结果，提交与普通端点相同的突变，但是使用mock而不是http结果作为变异的参数。这很方便，一旦端点准备就绪，您只需要更换一条线路。例如，当你有很小的开发周期时，这在scrum中运行良好，并且你知道，在sprint结束时，你的端点仍然可以运行。

无论出于何种原因，如果长时间没有获得所需的端点，这可能会有点棘手。我们曾经历过这样的情况，一个月内没有完整的微服务，但我们仍然需要在我们的前端开发一个丰富的功能。在这种情况下，我们使用wiremock来模拟该特征的微服务中的各种端点。虽然它有很多开销，但只有当你知道自己处于一个漫长的开发周期时才真正有用。其他我是建议只使用静态文件。

Answer 2

在我们的一个项目中，我们只使用静态json文件独立于后端开发前端。

我们使用了vue-cli-service，因此只需在contentBase中指定vue.config.js选项就可以使它为静态json文件提供服务。

这是一个（简化）示例：

vue.config.js：

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, 'src', 'api')
  }
}

在env变量中添加静态json路径，例如在.env文件中：

VUE_APP_API_USERS = 'users.json'

然后在访问API时：

import axios from 'axios';
axios.get(process.env.VUE_APP_API_USERS)
  .then(response => this.users = response.data)
  .catch(error => console.log(error));

users.json在目录结构中：

├── package.json
├── src
│   ├── api
│   │   └── users.json
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   └── main.js
├── vue.config.js
└── yarn.lock

运行vue-cli-service serve。它现在将为users.json提供API调用。

使用的vue-cli-service版本：3.6.0