以 vue-admin-template为例:
1,将 /src/main.js的(大概是26~29行)注释.
// if (process.env.NODE_ENV === 'production') {
// const { mockXHR } = require('../mock')
// mockXHR()
// }```
2, 将 /vue.config.js的(大概是39行)注释.
```bash
// before: require('./mock/mock-server.js')
3,在 /vue.config.js里面的 devServer对象里面设置 proxy代理,请求api接口,并解决跨域问题.
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
// before: require('./mock/mock-server.js'),
// 添加的代码start.
proxy: {
[process.env.VUE_APP_BASE_API]: { // /dev-api
target: 'https://www.fastmock.site/mock/... ...', // 这个你们自己去fastmock弄啦.
changeOrigin: true, // 开启代理服务器.
pathRewrite: {
[`^${process.env.VUE_APP_BASE_API}`]: '',
}
}
}
// 添加的代码end.
},```
4.将所有依赖内置mock功能的api请求 重置请求地址.
文件 /src/api/table:
```bash
import request from '@/utils/request'
export function getList(params) {
return request({
// url: '/vue-admin-template/list', // 依赖内置的mock功能的请求地址(注释).
url: '/table/list/get', // 基于fastmock的请求地址.
method: 'get',
params
})
}```
文件/src/api/user:
```bash
import request from '@/utils/request'
export function login(data) {
return request({
// url: '/vue-admin-template/user/login', // 依赖内置的mock功能的请求地址(注释).
url: '/login/post', // 基于fastmock的请求地址.
method: 'post',
data
})
}
export function getInfo(token) {
return request({
// url: '/vue-admin-template/user/info', // 依赖内置的mock功能的请求地址(注释).
url: '/info/get', // 基于fastmock的请求地址.
method: 'get',
params: {token}
})
}
export function logout() {
return request({
// url: '/vue-admin-template/user/logout', // 依赖内置的mock功能的请求地址(注释).
url: '/logout/post', // 基于fastmock的请求地址.
method: 'post'
})
}