Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段。
我们在开发的过程中,由于后台接口的没有完成或者没有稳定之前我们都是采用模拟数据的方式去进行开发项目,这样会使我们的前后端会同时的进行,提高我们的开发效率。
因为最近自己在自学 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 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 数据
如果你觉得本文对你有帮助,欢迎转发,点赞
本文作者是个小白,如有不足,欢迎留言指正。
Vue CLI 3.0脚手架如何在本地配置mock数据相关推荐
- Vue CLI 3.0脚手架如何在本地配置mock数据json
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
- vue/cli 3.0 脚手架【进阶】 使用 amfe-flexible 和 postcss-px2rem进行移动端适
安装vue-cli3 npm install -g @vue/cli 创建项目 vue-cli-test 脚手架-项目-成功-运行项目 基于vue-cli配置移动端自适应 转自:http://hj ...
- vue/cli 3.0 与 2.0脚手架怎样mock数据
vue/cli 3.0 与 2.0脚手架怎样mock数据 3.0 移除了 static 文件目次,新增了 public 目次,这个目次下的静态资本不会经由 webpack 的处置惩罚,会被直接拷贝,所 ...
- 专访Vue作者尤雨溪:Vue CLI 3.0重构的原因
1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...
- Vue CLI 3.0 正式发布,Vue.js 开发标准化工具
Vue CLI 3.0 已发布,该版本经历了重构,旨在: 减少现代前端工具的配置烦扰,尤其是在将多个工具混合在一起使用时: 尽可能在工具链中加入最佳实践,让它成为任意 Vue 应用程序的默认实践. V ...
- Vue CLI 3.0正式发布!
web前端教程 用大白话,来讲编程 网友们纷纷点赞,也有网友调侃学不动了! 尤雨溪表示,Vue CLI 3.0 与其他的版本完全不同,它经历了重构,目的是: 1.尽可能减少现代前端工具在配置上的烦恼, ...
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...
- @vue/cli 3.0 eslint 转成tslint
我们用 vue/cli 创建新项目的时候,通常会选择代码检查工具 [eslint|tslint],有的时候难免会选错,这个时候想要替换,怎么办 场景再现 vue create lint-vue 为了方 ...
- Vue Cli 3.0打包生成app
1.vue cli 3.0创建新工程,添加依赖mint-ui 2.项目配置中,公共路径设置为./,(注意,这一步非常重要,否则打包后项目找不到项目中文件) 修改保存后,可以看到vue.confi ...
最新文章
- 准确率、精准率、召回率、F1,我们真了解这些评价指标的意义吗?
- 如何删除UITableView中的空单元格? [重复]
- HTTP referer/HTTP referrer
- 一个感染型的病毒逆向分析
- 计算机Word应用程序,Word2007目录设置_计算机软件和应用程序_IT /计算机_信息
- 【C语言】(数组)C语言字符串中的小写字母转换为大写字母
- 四.开发记录之ubuntu系统安装ROS和开发环境
- Hello,Views(五)自动填充文字AutoCompleteTextView(附源码)
- vbscript html 在线,在HTML中使用VBScript可用三种方法
- R与Python手牵手:多格式文件导入与爬虫
- css中如何将a标签设置居中,cssa标签设置成block后,怎么让文字垂直居中_html/css_WEB-ITnose...
- 服务器server操作系统吗,windows server 2008 R2 操作系统
- 旋转倒立摆资料【包含源码和教程】!!
- linux安装桌面键盘,如何在 Linux 中使用屏幕键盘
- 力扣每日一题-10-121.买股票最佳时机
- oracle txn,【学习笔记】ORACLE分布式事务故障的处理 结合MOS官方文档分析
- Consider defining a bean of type问题
- 为什么你应聘不上或试用期被开?
- 什么是linux系统?
- 歌手大奖赛(C语言)