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.頁面中調用接口

兩種方法均可以去調用接口，能夠根據需求去使用不一樣的請求方式

本地攔截成功