一，安裝

npm install mockjs --save-dev
npm install json5 --save-dev
npm install axios --save

二，每個文件內容

目錄：

流程：

Home.vue執行getUserInforList()
調用main.js中全局變量$api
調用/utils/api下的getUserInfor()
通過request.js包裝好的get方法請求接口‘/user/getUserInfor’
通過devServer配置，攔截http請求
mock模擬后端服務監聽http請求，寫接口對數據進行操作

（1）vue.config.js

module.exports = {devServer: {before: require('./src/mock/index.js')} }

（2）mock/index.js

const fs = require('fs') const path = require('path') const Mock = require('mockjs') const JSON5 = require('json5')// 讀取json文件 function getJSONFile(filePath){var json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')return JSON5.parse(json) }module.exports = function(app){// 監聽http請求app.get('/user/getUserInfor', function(rep, res){var json = getJSONFile('./user/userInfor.json5')res.json(Mock.mock(json))}) }

（3）main.js

// 設置$http全局變量 import serve from '@/utils/api' Vue.prototype.$api = serve

（4）utils/request.js

// 引用axios import axios from 'axios'; // import qs from 'qs'const instance = axios.create({baseURL: 'http://localhost:8080',withCredentials: true,timeout: 5000,headers:{ "Access-Control-Allow-Origin": '*',"Access-Control-Allow-Headers": 'Origin, Content-Type, X-Auth-Token',"Access-Control-Allow-Methods": "POST, GET, PUT, OPTIONS, DELETE" ,},});//http request 攔截器 instance.interceptors.request.use(config => {return config},err => {return Promise.reject(err)} )//http response 攔截器 instance.interceptors.response.use(response => { return response },err => {return Promise.reject(err)} ) export function get(url, params){ return new Promise((resolve, reject) =>{ instance.get(url, { params: params }) .then(res => { resolve(res.data); }) .catch(err => { console.log(err)reject(err.data) }) });}export function post(url, params) { return new Promise((resolve, reject) => { instance.post(url, params) // instance.post(url, qs.stringify(params)) .then(res => { resolve(res.data); }) .catch(err => { console.log(err) reject(err.data) }) });}export function deletefn(url) { return new Promise((resolve, reject) => { instance.delete(url) .then(res => { resolve(res.data); }) .catch(err => { reject(err.data) }) });}export function deletefn1(url, params) { return new Promise((resolve, reject) => { instance.delete(url, { params: params }) .then(res => { resolve(res.data); }) .catch(err => { reject(err.data) }) });}export function put(url, params) { return new Promise((resolve, reject) => { instance.put(url, params) .then(res => { resolve(res.data); }) .catch(err => { reject(err.data) }) });}

（5）utils/api.js

import { get } from '@/utils/request'const serve = {getUserInfor(){return get('/user/getUserInfor',{})},} export default serve

（6）home.vue

<script> export default {name: 'Home',data(){return{}},mounted() {this.getUserInforList()},methods:{getUserInforList(){this.$api.getUserInfor().then(res => {console.log('請求結果：', res)}).catch(err => {console.log(err)})}} } </script>

總結

以上是生活随笔為你收集整理的vue项目中使用mock（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。