Vue CLI 3.0脚手架如何mock数据

developerworks 发布于2019-08-26 13:25 / 3077人阅读

摘要：的文件结构的文件结构可以看到版本的脚手架在项目结构上精简了很多，看上去没有那么的繁琐。配置完成之后，我们也是和上述一样，在项目中直接访问数据即可。

前后端分离的开发模式已经是目前前端的主流模式，至于为什么会前后端分离的开发我们就不做过多的阐述，既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段。

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

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

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

首先我们来说一说vue/cli 3.0 与 2.0 的一些不同：

3.0 移除了 static 文件目录，新增了 public 目录，这个目录下的静态资源不会经过 webpack 的处理，会被直接拷贝，所以我们能够直接访问到该目录下的资源。

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 数据

如果你觉得本文对你有帮助，欢迎转发，点赞

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

GPU云服务器云服务器 vue-cli vue-cli3 js mock数据 js的mock数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108802.html

Vue+Express全栈购物商城

摘要：一前言提纲基于和框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。服务端技术栈登录授权用认证机制，来实现登录登出。服务器配置和缓存策略，根据不同的来代理。申请证书全站升级到，配置的协议。一、前言提纲基于Vue和Express框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。二、历史版本基于Vue-CLI2.0:点我查看这个分支版本是一两年前...

Richard_Gao 2019-05-22 18:23 评论0 收藏0
Vue+Express全栈购物商城

摘要：一前言提纲基于和框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。服务端技术栈登录授权用认证机制，来实现登录登出。服务器配置和缓存策略，根据不同的来代理。申请证书全站升级到，配置的协议。一、前言提纲基于Vue和Express框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。二、历史版本基于Vue-CLI2.0:点我查看这个分支版本是一两...

luzhuqun 2019-08-26 13:50 评论0 收藏0
vue开发规范

摘要：项目结构公共资源公共资源全局样式公共组件布局模拟数据项目模块模块模块页面模块路由插件公共路由全局状态公共方法主视图主程设置静态资源配置文件开发规范语义化命名使用驼峰式命名，文件命名不宜过长，路由的命名和文件命名保持一致。背景由于saas平台即将开始，现在重新梳理前端架构和开发规范，项目使用模块化思想搭建，每个模块都有自己都路由和方法，尽量做到删除和添加模块，不会对框架产生较大对影响...

selfimpr 2019-08-23 12:55 评论0 收藏0
VueCli3.0中集成MockApi

摘要：缺点需要增加本地的代码量，以及需要配置实现拦截优点数据通过会更丰富。缺点修改内容沟通成本高，跟后端扯皮利用去模拟优点可控内容以及实现动态。三本地周边知识本地的思想就是利用完成。注意接口的和自己的接口不要冲突。 VueCli3.0中集成MockApi 一：使用场景哎哟，好烦啊，这个需求还么结束就来下一个需求，程序员不要排期的吗？没办法啊，资本主义的XX嘴脸啊来吧，技术评审我俩把接口...

刘玉平 2019-08-26 13:59 评论0 收藏0
搭建vue+webpack+mock脚手架（一）

摘要：前言仓库地址本文适合第一次搭建项目的朋友，讲讲我是怎么从零开始摸索着搭建一个项目框架的，属于总结归纳性质的文章。前言仓库地址：https://github.com/miaomiaozh... 本文适合第一次搭建项目的朋友，讲讲我是怎么从零开始摸索着搭建一个项目框架的，属于总结归纳性质的文章。基于vue的多页应用支持自定义mock数据支持热加载 js打包成多个项目结构介绍...

waltr 2019-08-21 11:29 评论0 收藏0