Vue CLI 3 環境中使用模擬資料（Mock）

摘要： 小編推薦： 掘金是一個面向程式員的高質量技術社群，從 一線大廠經驗分享到前端開發最佳實踐，無論是入門還是進階，來掘金你不會錯過前端開發的任何一個技術乾貨。 Vue CLI 3 主打自動化零配置確實很方便。有些地方還是需要進行一些配置，但是配置起來也非常簡潔。 今...

小編推薦： ofollow,noindex">掘金是一個面向程式員的高質量技術社群，從 一線大廠經驗分享到前端開發最佳實踐，無論是入門還是進階，來掘金你不會錯過前端開發的任何一個技術乾貨。

Vue CLI 3 主打自動化零配置確實很方便。有些地方還是需要進行一些配置，但是配置起來也非常簡潔。

今天分享一下 Vue CLI 3 環境中使用模擬資料（Mock）的簡單方法。

首先我們看一下目錄結構：

首先在根目錄上建立個 mock 目錄用於存放模擬資料，當然你可以根據你的喜好隨便命名目錄。我在這個目錄下放了一個 index.json 模擬資料檔案，當然你也可以使用 mock.js。

然後在根目錄下新建一個 vue.config.js 檔案，這檔案是調整 webpack 配置最簡單的方式，將會被 webpack-merge 合併入最終的 webpack 配置中。 在 vue.config.js 中編寫以下內容：

const mockIndexData = require("./mock/index.json");

module.exports = {
//...
devServer: {
port: 8080,
before(app) {
app.get("/api/index", (req, res) => {
res.json(mockIndexData);
});
}
}
};

這樣我們就可以在我們得元件中呼叫這個API了，例如：

import axios from "axios";

export default {
name: "home",

data() {
return {
// ... 
};
},
components: {
// ...
},
mounted() {
this.getHomeData();
},
methods: {
getHomeData() {
axios.get("/api/index").then(res => {
console.log(res);
// ...
});
}
}
};

搞定！

Vue CLI 3 確實改進了很多，也方便了很多，對於對於不習慣用命令列的使用者可以看看 使用 Vue CLI 使用者介面工具用可視方式建立 Vue 應用程式 ,確實很方便，功能也很強大。