一、配置后端访问路径
config/index.js
dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', // Various Dev Server settings host: 'localhost', // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: true, proxyTable: { '/api': { //代理地址 target: 'http://localhost:9000/hadsource', //需要代理的地址 changeOrigin: true, //是否跨域 secure: false, pathRewrite: { '^/api': '/' //本身的接口地址没有 '/api' 这种通用前缀,所以要rewrite,如果本身有则去掉 } } }, disableHostCheck: true, errorOverlay: true, notifyOnErrors: true, poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- // Use Eslint Loader? // If true, your code will be linted during bundling and // linting errors and warnings will be shown in the console. useEslint: false, // If true, eslint errors and warnings will also be shown in the error overlay // in the browser. showEslintErrorsInOverlay: false, /** * 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 },
二、在当前项目目录安装axios
npm install axios --save
三、代码部分
src/utils/request.js
import axios from 'axios' import { Message } from 'element-ui' import router from '../router' // create an axios instance const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url // withCredentials: true, // send cookies when cross-domain requests timeout: 120000 // request timeout }) // request interceptor service.interceptors.request.use( config => { // do something before request is sent return config }, error => { // do something with request error console.log(error) // for debug return Promise.reject(error) } ) // response interceptor service.interceptors.response.use( /** * If you want to get http information such as headers or status * Please return response => response */ /** * Determine the request status by custom code * Here is just an example * You can also judge the status by HTTP Status Code */ response => { const res = response // if the custom code is not 20000, it is judged as an error. if (res.status && res.status !== 200) { if (res.status === 40301) { Message({ message: '登录已过期请重新登录', type: 'error', duration: 5 * 1000 }) router.push(`/login?redirect=index`) } else { Message({ message: res.message || '网络异常', type: 'warning', duration: 5 * 1000 }) } return Promise.reject(new Error(res.message || 'Error')) } else { return res } }, error => { console.log('err' + error) // for debug Message({ message: error.message, type: 'error', duration: 5 * 1000 }) return Promise.reject(error) } ) export default service
src/api/book/index.js
import fetch from '@/utils/request' export function getBookNum() { return fetch({ url: '/api/book/getBookPublishYearNum', method: 'get' }) }
vue界面使用
<script> import { getBookNum } from '@/api/book/index' export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } }, created() { getBookNum().then(data => { console.log(data) }) }, } </script>