Vue CLI 3 环境中使用模拟数据（Mock）

小编推荐： 掘金是一个面向 程序员 的高质量技术社区，从 一线大厂经验分享到前端开发最佳实践，无论是入门还是进阶，来掘金你不会错过前端开发的任何一个技术干货。

Vue CLI 3 主打自动化零配置确实很方便。有些地方还是需要进行一些配置，但是配置起来也非常简洁。

今天分享一下 Vue CLI 3 环境中使用模拟数据（Mock）的简单方法。

首先我们看一下目录结构：

首先在根目录上创建个 mock 目录用于存放模拟数据，当然你可以根据你的喜好随便命名目录。我在这个目录下放了一个 index.json 模拟数据文件，当然你也可以使用 mock.js。

然后在根目录下新建一个 vue.config.js 文件，这文件是调整 webpack 配置最简单的方式，将会被 webpack-merge 合并入最终的 webpack 配置中。 在 vue.config.js 中编写以下内容：

const mockIndexData = require("./mock/index.json");

module.exports = {
  //...  
  devServer: {
    port: 8080,
    before(app) {
      app.get("/api/index", (req, res) => {
        res.json(mockIndexData);
      });
    }
  }
};

这样我们就可以在我们得组件中调用这个API了，例如：

import axios from "axios";

export default {
  name: "home",

  data() {
    return {
      // ... 
    };
  },
  components: {
    // ...  
  },
  mounted() {
    this.getHomeData();
  },
  methods: {
    getHomeData() {
      axios.get("/api/index").then(res => {
        console.log(res);
        // ...
      });
    }
  }
};

搞定！

Vue CLI 3 确实改进了很多，也方便了很多，对于对于不习惯用命令行的用户可以看看 使用 Vue CLI 用户界面 工具 用可视方式创建 Vue 应用程序 ,确实很方便，功能也很强大。