Vue CLI 3.0脚手架如何mock数据

先后端分离的开发模式已是目前前端的主流模式，至于为何会先后端分离的开发咱们就不作过多的阐述，既然是先后端分离的模式开发确定是离不开前端的数据模拟阶段。

咱们在开发的过程当中，因为后台接口的没有完成或者没有稳定以前咱们都是采用模拟数据的方式去进行开发项目，这样会使咱们的先后端会同时的进行，提升咱们的开发效率。

由于最近本身在自学 Vue 也在本身撸一个项目，确定会遇到使用数据的状况，因此就想着如何在前端作一些 mock 数据的处理，由于本身的项目使用的是 vue/cli 3.0 与 vue/cli 2.0 的使用有一些的不一样，因此在这里记录一下。

注意：本文主要说的是如何配置本地静态文件的 mock 数据的方式

首先咱们来讲一说vue/cli 3.0 与 2.0 的一些不一样：

1. 3.0 移除了 static 文件目录，新增了 public 目录，这个目录下的静态资源不会通过 webpack 的处理，会被直接拷贝，因此咱们可以直接访问到该目录下的资源。
2. 3.0 移除了 config、build 等配置目录，若是须要进行相关配置咱们须要在根目录下建立 vue.config.js 进行配置便可。

• 2.0 的文件结构

• 3.0 的文件结构

能够看到 3.0 版本的脚手架在项目结构上精简了不少，看上去没有那么的繁琐。接下来我就进行 mock 数据的配置，再说 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)

总结

以上咱们就学会了如何在 vue/cli 3.0 的项目中进行 mock 数据

若是你以为本文对你有帮助，欢迎转发，点赞

本文做者是个小白，若有不足，欢迎留言指正。
关注微信公众号：六小登登。领取全套学习资源