[随笔] vue-cli4 安装、配置 axios

[随笔] vue-cli4 安装、配置 axios

参考地址：

https://www.jianshu.com/p/31f52aade33d

记录时间：2020年12月

使用流程：

1. IE兼容性处理；

2. 安装、配置 axios；

   可把 axios 挂载到 vue 的 prototype 上，如此便不用每个文件都引入了（针对 axios库 ，而非vue-axios）

3. vue-axios 体验心得

1.IE兼容处理

axios是promise实现的，提到promise，首先应该想到IE不支持，所以应该先加个垫片，给IE做下兼容性处理

npm install babel-polyfill --save-dev

在 node_module 目录下找到 babel-polyfill 文件夹，根据实际情况在 main.js 文件中引入。如：

// main.js 文件（ babel-polyfill 文件夹在 node_module 目录下）
import 'babel-polyfill'

• 遇到问题

  报错：Error: only one instance of babel-polyfill is allowed

  解决：去掉在配置文件 config 中对 entry 添加的针对 babel-polyfill 属性的配置

---

2.安装、配置 vue-axios

1. axios与 vue-axios

参考: https://www.jianshu.com/p/d65e4d67884a

• axios

  参考：https://www.jianshu.com/p/31f52aade33d

  • 说明

  ​ axios是一个库，并不是vue中的第三方插件，使用时不能通过Vue.use()安装插件，需要在原型上进行挂载绑定。

  • 安装命令：$cnpm install --save axios

  • main.js 中引入：

    import Vue from 'vue'
    import axios from ‘axios’
    
    Vue.prototype.$axios = axios	// 在原型上进行挂载
    

  • 使用方法

    this.$axios.get(url).then((response) => {
      console.log(response.data)
    })
    

• vue-axios

  • 中文文档：http://www.axios-js.com/zh-cn/docs/vue-axios.html

  • 说明：vue-axios是将axios集成到Vue.js的小包装器，可以像插件一样进行安装：

    $cnpm install --save axios vue-axios

  • 在mian.js中引用axios，vue-axios，通过全局方法 Vue.use() 使用插件，就相当于调用install方法：

    import Vue from 'vue'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    
    Vue.use(VueAxios, axios)
    

  • 用法（示例）：

    Vue.axios.get(api).then((response) => {
      console.log(response.data)
    })
    
    this.axios.get(api).then((response) => {
      console.log(response.data)
    })
    
    this.$http.get(api).then((response) => {
      console.log(response.data)
    })
    

3.vue-axios 个人体验

本处使用的为封装过后的 vue-axios 组件，而非 原版 axios库

• 配置过程：

  • 【√】照上述方法 安装（可以在Vue项目下面node_modules看到目录：vue-axios，可在其下的/src/index.js中看到vue-axios的源代码。）

  • 【√】在 main.js 中引入

    在router目录下新建文件：axios.js (用于放置 axios 相关配置信息)：

    // ./router/axios.js
    import axios from 'axios'
    
    // 超时时间
    axios.defaults.timeout = 60000
    // 跨域请求，允许保存cookie
    axios.defaults.withCredentials = true
    axios.defaults.headers['channelNo'] = "WEB" // 让每个请求携带channelNo
    // 请求地址的域名
    axios.defaults.baseURL = "/service" // 启用代理，参见下方代理配置
    
    // 设置 post、put 默认 Content-Type
    axios.defaults.headers.post['Content-Type'] = 'application/json'
    axios.defaults.headers.put['Content-Type'] = 'application/json'
    
    
    export default axios
    

    为解决跨域问题启用代理，代理配置参见下方 代理配置项内容

    main.js 中引入：

    import axios from './router/axios'
    import VueAxios from 'vue-axios'
    
    Vue.use(VueAxios,axios)
    

  • 【√】配置别名@，可在项目中使用 @ 代替路径 ./src

    在新建的文件：vue.config.js 中:

    //vue.config.js
    const path = require('path');        //引入path模块
    function resolve(dir){
        return path.join(__dirname,dir)  //path.join(__dirname)设置绝对路径
    }
    module.exports={
        chainWebpack:(config)=>{
            config.resolve.alias
                //set第一个参数：设置的别名，第二个参数：设置的路径
            	//根据需要进行配置
                .set('@',resolve('./src'))
                .set('assets',resolve('.src/assets'))
                .set('components',resolve('./src/components'))
                .set('views',resolve('.src/views'))
        }
    }
    

  • 【√】代理配置

    参考：https://www.cnblogs.com/kgwei520blog/p/13686854.html

    // 在 vue.config.js (根目录下新建的文件)中添加代码： 
    module.exports  = {
        // 由于浏览器有跨域限制,这里cli 工具提供了 启动本地代理服务器 请求
        devServer:{
        	port: 8081,	// 端口
            proxy:{
                '/service':{ // 路径中有 /service 的请求都会走这个代理,可以自己定义一个,下面移除即可
                    target:'http://www.test.com:555',    // 目标代理接口地址,实际跨域要访问的接口,这个地址会替换掉 axios.defaults.baseURL
                    secure:false,
                    changeOrigin:true,  // 开启代理，在本地创建一个虚拟服务端
                    ws:true,       // 是否启用  websockets;
                    pathRewrite:{   // 去掉 路径中的  /service  的这一截
                        '^/service':''
                    }
                }
            }
        }
    }
    

  • src 下新建 api 目录用于存放请求方法

    // ./src/api/queryDatas.js
    import request from '@/router/axios'
    
    // 1. 实时交接任务数据
    export function queryConnectData(obj) {
      return request({
        url: 'api/Cloud/GetAllTypeOfTaskOverCount',
        method: 'post',
        data: obj
      })
    }
    

  • 页面中引入使用

    <!-- ConnectData.vue -->
    <script>
    	import {queryConnectData} from '@/api/queryDatas'
        
        // ...
        
        let obj = {
            "branchCN": "xxx",
            "linetype": "line"
        };
        queryConnectData(obj).then((resp) => {
        console.log(resp.data);
        if(resp.data.Code = '200') {
          let result = resp.data.Result
          // ...
        } else {
          alert('数据获取失败，无法刷新！');
        }
        }).catch((err) => {
          alert('数据获取失败，无法刷新！');
        });
    </script>