vue-cli3中配置axios及使⽤
创建了vue-cli3脚⼿架项⽬之后，需要⾃⼰新建⼀个vue.config.js⽂件，然后配置axios，就可以请求接⼝获取数据了。
实现代码：
1.vue.config.js：设置反向代理，解决跨域
1 proxy: { 2 '/api': {
3 target: 'http:\\\\192.168.1.24:8081/', //后端地址
4 secure: false, // 如果是https接⼝，需要配置这个参数 5 ws: true,//是否代理websockets 6 changeOrigin: true, 7 pathRewrite: { 8 '^/api': '' 9 }10 }11 }
2.main.js：配置axios信息
1 import axios from 'axios'2
3 Vue.prototype.$axios = axios4
5 axios.defaults.baseURL = '/api';
6 axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';//配置请求头信息。7 axios.defaults.headers.common['accessToken'] = 'FA4C308D5E8F09E01344ADDAEB4C71';
3.vue⽂件，使⽤axios请求数据：
1 this.$axios({
2 method: \"post\
3 url: \"/report/getReportFolders\4 data: {},
5 }).then((res) => {6 console.log(res);7 });
vue.config.js⽂件完整代码：
1 module.exports = {
2 /* 部署⽣产环境和开发环境下的URL：可对当前环境进⾏区分，baseUrl 从 Vue CLI 3.3 起已弃⽤，要使⽤publicPath */ 3 /* baseUrl: process.env.NODE_ENV === 'production' ? './' : '/' */
4 publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './', 5 /* 输出⽂件⽬录：在npm run build时，⽣成⽂件的⽬录名称 */ 6 outputDir: 'dist',
7 /* 放置⽣成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) ⽬录 */ 8 assetsDir: \"assets\
9 /* 是否在构建⽣产包时⽣成 sourceMap ⽂件，false将提⾼构建速度 */10 productionSourceMap: false,
11 /* 默认情况下，⽣成的静态资源在它们的⽂件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭⽂件名哈希。(false的时候就是让原来的⽂件名不改变) */12 filenameHashing: false,
13 /* 代码保存时进⾏eslint检测 */14 lintOnSave: true,
15 /* webpack-dev-server 相关配置 */16 devServer: {
17 /* ⾃动打开浏览器 */18 open: false,
19 /* 设置为0.0.0.0则所有的地址均能访问 */20 host: '0.0.0.0',21 port: 8081,22 https: false,23 hotOnly: false,24 /* 使⽤代理 */25 proxy: {26 '/api': {
27 target: '', //后端地址
28 secure: false, // 如果是https接⼝，需要配置这个参数29 ws: true,//是否代理websockets30 changeOrigin: true,31 pathRewrite: {32 '^/api': ''33 }34 }35 }36 },37 }
