前后端分離的開(kāi)發(fā)模式已經(jīng)是目前前端的主流模式，至于為什么會(huì)前后端分離的開(kāi)發(fā)我們就不做過(guò)多的闡述，既然是前后端分離的模式開(kāi)發(fā)肯定是離不開(kāi)前端的數(shù)據(jù)模擬階段。

我們?cè)陂_(kāi)發(fā)的過(guò)程中，由于后臺(tái)接口的沒(méi)有完成或者沒(méi)有穩(wěn)定之前我們都是采用模擬數(shù)據(jù)的方式去進(jìn)行開(kāi)發(fā)項(xiàng)目，這樣會(huì)使我們的前后端會(huì)同時(shí)的進(jìn)行，提高我們的開(kāi)發(fā)效率。

因?yàn)樽罱约涸谧詫W(xué) Vue 也在自己擼一個(gè)項(xiàng)目，肯定會(huì)遇到使用數(shù)據(jù)的情況，所以就想著如何在前端做一些 mock 數(shù)據(jù)的處理，因?yàn)樽约旱捻?xiàng)目使用的是 vue/cli 3.0 與 vue/cli 2.0 的使用有一些的不同，所以在這里記錄一下。

注意：本文主要說(shuō)的是如何配置本地靜態(tài)文件的 mock 數(shù)據(jù)的方式

首先我們來(lái)說(shuō)一說(shuō)vue/cli 3.0 與 2.0 的一些不同：

3.0 移除了 static 文件目錄，新增了 public 目錄，這個(gè)目錄下的靜態(tài)資源不會(huì)經(jīng)過(guò) webpack 的處理，會(huì)被直接拷貝，所以我們能夠直接訪問(wèn)到該目錄下的資源。

3.0 移除了 config、build 等配置目錄，如果需要進(jìn)行相關(guān)配置我們需要在根目錄下創(chuàng)建 vue.config.js 進(jìn)行配置即可。

• 2.0 的文件結(jié)構(gòu)
  
• 3.0 的文件結(jié)構(gòu)
  

可以看到 3.0 版本的腳手架在項(xiàng)目結(jié)構(gòu)上精簡(jiǎn)了很多，看上去沒(méi)有那么的繁瑣。接下來(lái)我就進(jìn)行 mock 數(shù)據(jù)的配置，再說(shuō) 3.0 之前，我們先看看 2.0 的時(shí)候我們都是怎么使用靜態(tài)數(shù)據(jù)文件進(jìn)行 mock 的。

2.0 配置

首先，在這個(gè)版本是只有我們的 static 目錄下的文件是可以被訪問(wèn)到的，所以我們就把靜態(tài)文件放入該目錄下。

//?靜態(tài)數(shù)據(jù)存放的位置 static/mock/home.json

我們啟動(dòng)項(xiàng)目之后一般項(xiàng)目會(huì)啟動(dòng)在 8080 端口，如果不是修改下對(duì)應(yīng)端口號(hào)即可，我們?cè)L問(wèn)下面地址：

http://localhost:8080/static/mock/index.json

我們可以看到我們的數(shù)據(jù)是可以請(qǐng)求到的，之后我們只需要在項(xiàng)目中 config/index.js 添加如下屬性：

dev:?{//?Paths?fiddler?charlesassetsSubDirectory:?'static',assetsPublicPath:?'/',proxyTable:?{'/api':?{target:?'http://localhost:8080',pathRewrite:?{'^/api':?'/static/mock'}}} }

之后我們?cè)陧?xiàng)目中使用即可，我們就能獲取我們需要的數(shù)據(jù)。

axios.get('/api/index.json').then(this.handler)

3.0 配置

因?yàn)?static 目錄移除，我們把靜態(tài)文件放入 public 文件下。

//?靜態(tài)數(shù)據(jù)存放的位置 public/mock/home.json

和上面一樣，啟動(dòng)項(xiàng)目后我們看看數(shù)據(jù)能不能正常被訪問(wèn)。

http://localhost:8080/mock/home.json

之后，不同的地方在于，我們需要手動(dòng)創(chuàng)建一個(gè) vue.config.js 文件放在根目錄下。

module.exports?=?{devServer:?{proxy:?{'/api':?{target:?'http://localhost:8080',changeOrigin:?true,pathRewrite:?{'^/api':?'/mock'}}}} }

配置完成之后，我們也是和上述一樣，在項(xiàng)目中直接訪問(wèn)數(shù)據(jù)即可。

axios.get('/api/home.json').then(this.handler)

總結(jié)

以上我們就學(xué)會(huì)了如何在 vue/cli 3.0 的項(xiàng)目中進(jìn)行 mock 數(shù)據(jù)

總結(jié)

以上是生活随笔為你收集整理的Vue CLI 3.0脚手架如何在本地配置mock数据json的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。