Vue CLI 3.0腳手架如何mock數據

先後端分離的開發模式已是目前前端的主流模式，至於爲何會先後端分離的開發咱們就不作過多的闡述，既然是先後端分離的模式開發確定是離不開前端的數據模擬階段。

咱們在開發的過程當中，因爲後臺接口的沒有完成或者沒有穩定以前咱們都是採用模擬數據的方式去進行開發項目，這樣會使咱們的先後端會同時的進行，提升咱們的開發效率。

由於最近本身在自學 Vue 也在本身擼一個項目，確定會遇到使用數據的狀況，因此就想着如何在前端作一些 mock 數據的處理，由於本身的項目使用的是 vue/cli 3.0 與 vue/cli 2.0 的使用有一些的不一樣，因此在這裏記錄一下。

注意：本文主要說的是如何配置本地靜態文件的 mock 數據的方式

首先咱們來講一說vue/cli 3.0 與 2.0 的一些不一樣：

1. 3.0 移除了 static 文件目錄，新增了 public 目錄，這個目錄下的靜態資源不會通過 webpack 的處理，會被直接拷貝，因此咱們可以直接訪問到該目錄下的資源。
2. 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 charles
    assetsSubDirectory: '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 數據

若是你以爲本文對你有幫助，歡迎轉發，點贊

本文做者是個小白，若有不足，歡迎留言指正。
關注微信公衆號：六小登登。領取全套學習資源