vue-cli mock

最近一直在作vue的移动端项目，忽然间发现vue-cli更新了，使用vue-cli结合webpack建立项目以后，项目文件发生了一些变化。

这是vue-cli更新以前，经过vue init webpack 建立项目时build目录，

这是vue-cli更新以后，经过 vue init webpack 建立项目时build目录。
dev-server这个文件放在了webpack.dev.conf.js文件里面做为一个对象存在。

以前作vue项目时，模块化使用mockjs模拟本地请求，不用所有写在一个文件内，方便开发。

1.封装axios post请求方式 （promise axios post封装） --- 简单的封装了一下post方法，能够本身根据项目需求，去封装post get请求

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import querystring from 'querystring'
Vue.use(Vuex)
axios.defaults.baseURL = '/ys/gzrz/services/'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.timeout = 600000
let post = ({
url,
data = {},
tips = false
}) => {
return new Promise((resolve, reject) => {

axios.post(url, querystring.stringify(data))
  .then(res => {
    if (res.data.code === 'SUCCESS') {
      resolve(res.data.body)
    } else {
      reject(res.data.code, res.data.msg)
    }
  })
  .catch(err => {
    reject(err, '请求超时')
  })

})
}
export default {
post
}

1. 建立mock文件夹 建立index.js

index.js

api.js文件是返回的接口数据（我是根据不一样页面，把不一样的接口放在一个文件内，方便代码操做）

3.最后一步在webpack.dev.conf.js文件使用mock

这样去使用mockjs，并不须要在main.js中去全局引用。

4.页面中调用接口

两种方法均可以去调用接口，能够根据需求去使用不一样的请求方式

本地拦截成功