Vue CLI 3.0脚手架如何在本地配置mock数据json

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

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

因为最近自己在自学 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 charlesassetsSubDirectory: '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 数据

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247448.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python 通过下载包setup.py安装模块

下载安装包,并解压到相应的位置 1、打开cmd 2、到达安装目录 3、python setup.py build 4、python setup.py install 转载于:https://www.cnblogs.com/liuchunxiao83/p/11207340.html

webpack之externals操作三部曲--正确的姿势

1.作用 首先webpack提供这个externals选项作用是从打包的bundle文件中排除依赖。换句话说就是让在项目中通过import引入的依赖在打包的时候不会打包到bundle包中去,而是通过script的方式去访问这些依赖。 2.怎么用? 以jquery为例子,目的是在…

Anaconda3自带jupyter

1、cmd命令行中输入 JupyterNotebook 2、系统自动调起下面页面(注册端口冲突是打不开的) 转载于:https://www.cnblogs.com/liuchunxiao83/p/11207385.html

python 的按位与 或 异或 运算

符号 描述 运算规则 by MoreWindows & 与 两个位都为1时,结果才为1 (统计奇数) | 或 两个位都为0时,结果才为0 (统计偶数) ^ 异或 两…

理解Shadow DOM

1. 什么是Shadow DOM? Shadow DOM 如果按照英文翻译的话可以理解为 影子DOM, 何为影子DOM呢?可以理解为一般情况下使用肉眼看不到的DOM结构,那如果一般情况下看不到的话,那也就是说我们无法直接控制操纵的DOM结构。 Shadow DOM 它是HTML的一…

046 实例11-自动轨迹绘制

目录 一、"自动轨迹绘制"问题分析1.1 问题分析1.2 自动轨迹绘制二、"自动轨迹绘制"实例讲解2.1 自动轨迹绘制2.2 数据接口定义2.3 数据文件三、"自动轨迹绘制"举一反三3.1 理解方法思维3.2 应用问题的扩展一、"自动轨迹绘制"问题分析 …

bootstrap-select采坑

bootstrap-select采坑 1.class"selectpicker" 普通的下拉框功能 2.title"请选择城市名称" title的作用与palcehoder一样。 3.select class"selectpicker" multiple selectpicker和multiple属性的搭配使用可实现多选 4.data-live-search"tru…

对vue虚拟dom的研究

Vue.js通过编译将template 模板转换成渲染函数(render ) ,执行渲染函数就可以得到一个虚拟节点树在对 Model 进行操作的时候,会触发对应 Dep 中的 Watcher 对象。Watcher 对象会调用对应的 update 来修改视图。这个过程主要是将新旧虚拟节点进行差异对比…

element-ui之dialog组件title插槽的使用

dialog对话框组件title属性的slot使用方法 使用背景 需要单独控制title中某个数据显示及样式&#xff0c;footer也一样 <el-dialog// 也可以这样写,但是没有办法单独控制name age的显示// title"name age"title"提示":visible.sync"dialogVisi…

css3自适应布局单位vw,vh

视口单位(Viewport units) 什么是视口&#xff1f; 在桌面端&#xff0c;视口指的是在桌面端&#xff0c;指的是浏览器的可视区域&#xff1b;而在移动端&#xff0c;它涉及3个视口&#xff1a;Layout Viewport&#xff08;布局视口&#xff09;&#xff0c;Visual Viewport…

python 操作 elasticsearch-7.0.2 遇到的问题

错误一&#xff1a;TypeError: search() got an unexpected keyword argument doc_type&#xff0c;得到不预期外的参数 解决方法&#xff1a;elasticsearch7里不用文档类型&#xff0c;所以去掉 doc_typecredit_data 错误二&#xff1a;RequestError(400, illegal_argument_ex…

用到的Shell

sed 1i 添加的内容 file #这是在第一行前添加字符串 sed $i 添加的内容 file #这是在最后一行行前添加字符串 sed $a添加的内容 file #这是在最后一行行后添加字符串 sed -i s/.*/行首添加内容&行尾添加内容/ 文件名 //每一行 sed -i $a新增的一行 tars_build_tar.sh a…

如何解决浏览器缩小出现横向滚动条时网页背景图出现空白的问题

原因&#xff1a; 当窗口缩小时&#xff0c;浏览器默认100%宽度为浏览器窗口的宽度。而忽略了下部内容层固定宽度(1024px)。从而出现了固定宽度大于100%宽度的现象。浏览以此理解来解析页面&#xff0c;就出现了容器宽度理解上的差异&#xff0c;出现了一个非常奇特的BUG。 解…

前端设计模式

1. 单例模式 2.装饰器模式 转载于:https://www.cnblogs.com/lyraLee/p/11210985.html

区别 (function($){...})(jQuery)、$(function(){ })和$.fn

一、(function($){…})(jQuery) 首先function(arg){...}定义了一个匿名函数&#xff0c;参数为arg,而调用时需要在函数后面写上括号和实参&#xff0c;由于操作符的优先级&#xff0c;函数本身也需要括号&#xff0c;也就成了&#xff1a; &#xff08;function(arg){...}&…

git 清除缓存

清除git缓存 git config --local --unset credential.helpergit config --global --unset credential.helpergit config --system --unset credential.helper保存git缓存 git config --global credential.helper store转载于:https://www.cnblogs.com/zhouyideboke/p/11211650.…

网页里如何使用js禁用控制台

网页里如何禁用右击事件&#xff1f;使用jQuery&#xff0c;几句代码就可以搞定了 document.oncontextmenu function(){return false;} 简单示例&#xff1a; js实现&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><…

Java生鲜电商平台-订单中心服务架构与异常订单逻辑

Java生鲜电商平台-订单中心服务架构与异常订单逻辑 订单架构实战中阐述了订单系统的重要性&#xff0c;并从订单系统的信息架构和流程上对订单系统有了总体认知&#xff0c;同时还穿插着一些常见的订单业务规则和逻辑。上文写到订单的拆单部分时搁置了&#xff0c;现在接上文继…

Vuex的全面用法总结

1. vuex简介 vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起&#xff0c;集中式来管理。需要声明的是&#xff0c;这里所说的状态指的是vue组件中data里面的属性。了解vue的同学应该是明白data是怎么回事的吧&#xff0c;如果不懂…

vue中通过第三方代理解决跨域问题

最近在学node&#xff0c;遇到了跨域的问题&#xff0c;来记录下方法 首页服务端的框架是通过express-generator 搭建起来的 npm install -g express-generator 具体接下来的细节不多说&#xff0c;今天主要说跨域 的问题 左侧为服务端项目结构&#xff0c;www为可执行文件&am…