工程科技 网站设计,现在哪个电商平台比较好做,多人一起做视频网站,卖护肤在哪个网站做宣传好前后端分离的开发模式已经是目前前端的主流模式#xff0c;至于为什么会前后端分离的开发我们就不做过多的阐述#xff0c;既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段。
我们在开发的过程中#xff0c;由于后台接口的没有完成或者没有稳定之前我们都是采用…前后端分离的开发模式已经是目前前端的主流模式至于为什么会前后端分离的开发我们就不做过多的阐述既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段。
我们在开发的过程中由于后台接口的没有完成或者没有稳定之前我们都是采用模拟数据的方式去进行开发项目这样会使我们的前后端会同时的进行提高我们的开发效率。
因为最近自己在自学 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 数据
