最近一直在做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
}
- 创建mock文件夹 创建index.js
index.js
api.js文件是返回的接口数据(我是根据不同页面,把不同的接口放在一个文件内,方便代码操作)
3.最后一步在webpack.dev.conf.js文件使用mock
这样去使用mockjs,并不需要在main.js中去全局引用。
4.页面中调用接口
两种方法都可以去调用接口,可以根据需求去使用不同的请求方式
本地拦截成功
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。