[toc] ### 一、在vue.config.js中配置跨域 ``` // before: require('./mock/mock-server.js') proxy : { [process.env.VUE_APP_BASE_API] : { target : "http://ceshi8.dishaxy.com", ws:true, changeOrigin : true, pathRewrite : { ["^" + process.env.VUE_APP_BASE_API] : "" } } } ``` ### 二、實現登錄功能 2.1 配置登錄api接口 ``` export function login(data) { return request({ url: '/user/login', method: 'post', data }) } ``` 2.2 刪除默認的用戶名和密碼 2.3 刪除默認的表單驗證 ``` export default { name: 'Login', components: { SocialSign }, data() { // const validateUsername = (rule, value, callback) => { // if (!validUsername(value)) { // callback(new Error('Please enter the correct user name')) // } else { // callback() // } // } // const validatePassword = (rule, value, callback) => { // if (value.length < 6) { // callback(new Error('The password can not be less than 6 digits')) // } else { // callback() // } // } return { loginForm: { username: '', password: '' }, loginRules: { username: [{ required: true, trigger: 'blur', }], password: [{ required: true, trigger: 'blur', }] }, passwordType: 'password', capsTooltip: false, loading: false, showDialog: false, redirect: undefined, otherQuery: {} } }, ``` ### 三、配置用戶信息接口 ``` export function getInfo(token) { return request({ url: '/admin/user/info', method: 'get', params: { token } }) } ``` ### 四、解決錯誤提示問題 ``` // request.js error => { console.log('err' + error) // for debug Message({ message: error.response.data.data, type: 'error', duration: 5 * 1000 }) return Promise.reject(error) } ```