原因
- 1、mockjs本地开发的时候用还好，mock数据需要生产时候用就不大行了
- 2、mock的数据通过module.exports、export实现的时候，npm run build 生产打包的时候，这些假数据会打包进app.js文件里面，导致文件大、首屏渲染慢；而且，在js文件里面mock的数据量超过webpack限制的时候，打包会失败
- 3、远程mock数据的就不需要了。像 YApi、网易NEI
场景
- 1、做演示项目的时候，数据需要完全本地化实现
- 2、做演示项目的时候，要求数据可供业务人员修改
- 3、mock数据量1w 的时候（因为项目用到的数据有6w ，十几M的文件，需要用到此方法了）
- 4、做的项目，需要前端人员先定义接口数据，后台人员配合传。这时候定义好的数据格式直接扔给后台人员就行了，特别是一些“查”，没有“增删改”的项目，前端写好后，基本不需要怎么修改了，挺方便的。
- 5、基于vue2 cli3项目
方法
vue cli3 的项目，打生产包的时候，public文件夹里面的文件，是不经webpack编译，直接复制到 publicPath设置的目录下的，开发时用到的json数据、图片等资源文件，可以放到 public目录里面。
mock资源
如下，准备了一张图片和一个json文件
table.json， cat.png
|-- src
|-- public
|-- data
|-- table.json
|-- images
|-- cat.png配置
涉及的文件如下（具体参考代码）：
|-- src
|-- .env.development // 开发环境配置，主要是配置服务器地址
|-- .env.production // 生产环境配置，主要是配置服务器地址
|-- settings.js // 一些全局配置，把publicPath的值设置在这里
|-- utils
|-- mock-request.js // axios请求封装
|-- api
|-- table.js // 获取table.json数据的请求封装
|-- views
|-- mockDataTest // 用来显示请求结果
|-- index.vue
|-- index.scss
|-- index.js
|-- public
|-- data
|-- table.json
|-- images
|-- cat.png
|-- vue.config.js vue.config.js settings.js
先配置下访问公共路径，例如，想在访问的时候地址加上dist路径，可以在vue.config.js如下配置
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/' : '/dist',
}为方便调用，记得这里要和settings.js里面的publicPath同步修改。
.env.development .env.production
这里主要是配置下部署的服务器的地址，例如，开发时，本地访问的地址是http://localhost:8081 定义一个参数，存放此地址，名字随意
VUE_APP_MOCK_URL = 'http://localhost:8081/'
mock-request.js
这里主要是配置下axios的baseURL，直接读取.env.development or .env.production里面配置的服务器地址就行，例如，
baseURL: process.env.VUE_APP_MOCK_URL
这里会自动根据命令，读取不同环境配置的服务器地址
table.js
这里是服务器请求相关的，.json文件的数据怎么请求获取，如下所示
import mrequest from '@/utils/mock-request'
import defaultSettings from '@/settings'
const { publicPath } = defaultSettings
export const tableData = () => {
return mrequest({
url: publicPath `/data/table.json`,
method: 'get'
})
}mockDataTest
这里主要是演示效果
- 1、调用接口，在界面上显示table.json的数据
- 2、显示放的图片（也可以是其他资源，例如音乐、视频）
具体看代码了
效果如下
代码
代码，参考
总结
简单的实现了不用依赖后台接口的mock数据请求。数据都存放在.json文件里面。这些放在public文件夹的文件，都不参与编译，方便修改和替换。打包生产后，可以直接放静态服务器运行。
以上，因为一个演示平台需要，数据、图片、视频都有频繁修改替换的可能，所以采用如此方式实现。
到此这篇关于vue本地模拟服务器请求mock数据的文章就介绍到这了,更多相关vue本地模拟服务器请求mock内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！