本文用于修改vue-admin-template的设置,使其可以和后端直接联调。包括去除打开两个网页bug、去除mock、调通接口、去除token验证、在login时获取user info、改中文,内容按先后顺序排布,根据需要直接跳到自己需要的部分即可。
1.去除打开两个网页bug
1.1 打开根目录下的vue.config.js文件,将devServer的open改为false。
1.2 打开根目录下的package.json,在script中的dev最后加上--open。
// vue.config.js
devServer: {
port: port,
open: false,
...
},
// package.json
"scripts": {
"dev": "vue-cli-service serve --open",
...
}
2.去除mock
2.1 打开根目录下的vue.config.js,将devServer中的before注释掉。
2.2 打开src/main.js的以下代码注释掉
// vue.config.js
devServer: {
...
// before: require('./mock/mock-server.js')
},
// main.js
//if (process.env.NODE_ENV === 'production') {
// const { mockXHR } = require('../mock')
// mockXHR()
//}
3.调通接口
3.1 根据需求修改src/utils/request.js第46行const res = response.data第49行res.code !== 20000。返回的结果是response,如果是根据response.result === 'true'来判断的话,那就将第46行改成const res = response,将第49行改为res.code !== 'true'
3.2 需要向别的后台发送请求,可以直接将完整url用字符创拼接的方式直接放在url的位置,比如src/api/user.js。或者封装一个新的函数requestNew.js。
3.3 修改src/api中的各种链接,还有调用这些链接的地方(比如store/modules/user.js/user login)传参可能不同。
// src/api/user.js
export function login(data) {
return request({
// url: '/vue-admin-template/user/login',
url: 'http://www.your-website.com',
method: 'post',
data
})
}
// requestNew.js
import request from '@/utils/request'
const requestNew = function ({ url, ...params }) {
return request({
url: `http://your/base-url/${url}`,
...params
})
}
export default requestNew
4.去除token验证
4.1 全局搜索getToken(),替换成'fakeToken'或别的字符串
5.在login时获取user info
5.1 如果后台在login时就获取了用户信息,那么将以下代码注释掉 5.2 然后修改一下src/store/modules/user.js中vuex部分代码,将userInfo保存到store中即可
// src/permission.js
try {
// get user info
// await store.dispatch('user/getInfo')
next()
}
// store/modules/user.js
// get user info
// getInfo({ commit, state }) {
// return new Promise((resolve, reject) => {
// getInfo(state.token).then(response => {
// const { data } = response
//
// if (!data) {
// reject('Verification failed, please Login again.')
// }
//
// const { name, avatar } = data
//
// commit('SET_NAME', name)
// commit('SET_AVATAR', avatar)
// resolve(data)
// }).catch(error => {
// reject(error)
// })
// })
// },
6.改中文
6.1 src/main.js第7行改import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n