前后端分離的開(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 charles
  assetsSubDirectory: '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ù)，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論