' 'use strict' // Template version: 1.3.1 // see for documentation. const path = require('path') //引入跨域配置 var proxyConfig = require('./proxyConfig') module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: 'https://www.jb51.net/', //proxyTable: {}, //默认跨域配置为空 proxyTable: proxyConfig.proxy, // Various Dev Server settings host: 'localhost', // can be overwritten by process.env.HOST port: 8886, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- /** * Source Maps */ // https://webpack.js.org/configuration/devtool/#development devtool: 'cheap-module-eval-source-map', // If you have problems debugging vue-files in devtools, // set this to false - it *may* help // https://vue-loader.vuejs.org/en/options.html#cachebusting cacheBusting: true, cssSourceMap: true }, build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', // 项目名字改变时这里需要变化 原先为assetsPublicPath: '.' assetsPublicPath: './', /** * Source Maps */ productionSourceMap: true, // https://webpack.js.org/configuration/devtool/#production devtool: '#source-map', // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report } }
2.config目录下创建一个文件 proxyConfig.js文件
module.exports={ proxy:{ 'https://www.jb51.net/':{ //将localhost：8081 映射为 /apis target:'http://localhost:8080',//接口地址 changeOrigin: true,// 如果接口跨域，需要进行这个参数配置 secure:false, //如果接口是HTTPS接口，需要设置成true pathRewrite:{ '^/':'' } } } }
三、封装API 请求Url port.js
export default { oauth: { login: '/oauth/token', // 登录 logout: '/oauth/logout' // // 退出 }, user: { addUser: '/user/add', updateUser: '/user/update', getUser:'/user/', //+ Id exists:'/exists/', // +id enable:'/enable/', // +id disable:'/disable/', // +id delete:'/delete/', //+id password:'/password ', query:'/query' } }
四、main.js 引入
import http from './plugins/http.js' import ports from './plugins/ports' Vue.prototype.http = http Vue.prototype.ports = ports
五、使用
login.vue中使用
login() { this.http.post(this.ports.oauth.login,{username:this.userId, password:this.password,grant_type:'password'}, res => { if (res.success) { // 返回正确的处理 页面跳转 this.$events.emit('goto', 'edit'); } else { // 返回错误的处理 //alert("等待处理"); } },err =>{ //console.log("正在处理"+err.response.status); if(err.response.status=='400'){ //显示用户名或密码错误 this.$refs.username.focus(); this.$refs.hint.click(); } }) }
以上这篇Vue axios获取token临时令牌封装案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: