vue-admin-template去除mock等开箱设置

4,709 阅读2分钟

本文用于修改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