详细解释Vue CLI 3.0如何搭建模拟数据

前端分离的发展模式是目前的主流模式。至于前端分离为什么发展起来，我们就不多赘述了。既然是前端分离的模式，开发必然离不开前端数据模拟阶段。

在开发过程中，由于后台界面不完整或不稳定，我们总是采用模拟数据的方式来开发项目，这将使我们的前端和后端同时工作，提高我们的开发效率。

因为最近我是自学的，Vue也在做一个项目，肯定会遇到使用数据的情况，所以就想着如何在前端做一些模拟数据处理。因为我的项目使用的是vue/cli 3.0，不同于vue/cli 2.0，所以在这里记录一下。

注：本文主要讨论如何配置本地静态文件的模拟数据

首先，让我们谈谈vue/cli 3.0和2.0之间的一些区别：

在3.0中，静态文件目录被移除，公共目录被添加。这个目录中的静态资源不会被webpack处理，而是直接复制，所以我们可以直接访问这个目录中的资源。在3.0中，配置、构建和其他配置目录已经被删除。如果需要相关的配置，我们需要在根目录下创建vue.config.js进行配置。2.0文件结构

3.0的文件结构

可以看到3.0版本的脚手架在项目结构上做了简化，看起来没有那么繁琐。接下来，我将配置模拟数据。在谈论3.0之前，让我们先来看看我们是如何在2.0中使用静态数据文件进行模拟的。

2.0配置

首先，在这个版本中，只有我们静态目录中的文件可以被访问，所以我们把静态文件放在这个目录中。

//静态数据存储的位置static/mock/home.json我们启动项目后，一般项目会从8080端口开始。如果对应的端口号没有修改，我们可以访问以下地址：http://localhost :8080/static/mock/index . JSON。

我们可以看到我们的数据可以被请求，然后我们只需要在项目中向config/index.js添加以下属性：

dev : {//path fiddler Charles assetsubdirector : ' static '、assetpublipath : '/'、The proxy table : { '/API ' : { target : ' http://localhost 33608080 '、path rewrite 3360 { '/API ' : '/static/mock ' } }都可以在项目中使用，我们可以得到需要的数据。

Axios.get ('/API/index.json ')。然后(this.handler) 3.0配置

因为静态目录被删除了，我们把静态文件放在公共文件下面。

//静态数据存储public/mock/home.json的位置同上。项目启动后，我们会看看数据是否可以正常访问。http://localhost :8080/mock/home . JSON

之后，不同的是，我们需要手动创建一个vue.config.js文件，并将其放在根目录中。

module . exports={ devserver : { proxy : { '/API ' : { target : ' http://localhost :8080 '，changeOrigin: true，在完成path rewrite : { '/API ' : '/mock ' } }的配置后，我们可以像上面一样直接访问项目中的数据。

Axios.get ('/API/home.json ')。然后(this.handler)总结

以上，我们学习了如何在vue/cli 3.0项目中进行模拟数据，对大家的学习有帮助，支持我们。