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 = axios 4 5 axios.defaults.baseURL = '/api'; 6 axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';//配置请求头信息。 7 axios.defaults.headers.common['accessToken'] = 'FA4C308D5E8F6409E01344ADDAEB4C71';
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,//是否代理websockets 30 changeOrigin: true, 31 pathRewrite: { 32 '^/api': '' 33 } 34 } 35 } 36 }, 37 }