vue中对axios的封装

本文主要是对axios一个简单的封装，工作总结
?阿勇的博客?

1. 首先通过npm命令对axios依赖包进行导入

   1. npm install axios --save

   2. 在src目录下创建tools–>http–>request.js

   3. // request.js
      // 主要是对axios的根地址进行获取
      import axios from 'axios'
      
      export default function require({ type = 'COMMON', data }) {
        let baseUrl = process.env.VUE_APP_API_BASE_URL
        switch (type) {
          case 'COMMON':
            baseUrl = process.env.VUE_APP_API_BASE_URL
            break;
          case 'LOGIN':
            baseUrl = process.env.VUE_APP_LOGIN_BASE_URL
            break;
          case 'FROM':
            baseUrl = process.env.VUE_APP_FORM_BASE_URL
            break;
          default:
            break;
        }
        console.log('baseUrl', process.env);
        const service = axios.create({
          baseURL: baseUrl, // url = base url + request url
          // withCredentials: true, // send cookies when cross-domain requests
          timeout: 5000 // request timeout
        })
        return service(data);
        }
      

   4. 在src目录下创建api文件夹（书写一个接口函数，方便vue页面直接使用）

      1. 举例：

         • // 直接在需要使用的vue的script标签中 important { getConfigItemListApi } from '@/api/xxx.js'
           import request from '@/tools/http/request'
           
           // 獲取通用配置項
           export function getConfigItemListApi(data) {
             return request({
               data: {
                 url: '/rec/system/getByControlCode/' + data,
                 method: 'post'
               }
             })
           }
           

      2. 以后的接口代码都写在api的文件夹下

页面组件的使用

1. 登录账号跳转到主页面之后，需要在src下边创建一个layout文件夹，主文件为index.vue，页面需要的组件放到components文件下，写好的组件通过index.js文件到处，具体操作：

   • // 对vue文件进行命名并且暴露
     export { default as AppMain } from './AppMain.vue' 
     export { default as Navbar } from './Navbar.vue'
     

   • <script>
     // 导入到index.vue文件中对组件进行注册和使用
     import { AppMain, Navbar } from './components'
     export default {
       name: 'Layout',
       components: {
         AppMain,
         Navbar
       }
     }
     </script>
     

vue环境配置（对开发环境和生产环境的配置，所创建的文件和根目录同级）

1. 命名规则：属性名必须以VUE_APP_开头，比如VUE_APP_XXX

2. .env.development

   • # 开发环境配置
     NODE_ENV=development
     
     # base url
     VUE_APP_API_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
     VUE_APP_FORM_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
     VUE_APP_SIGN_OFF_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
     VUE_APP_LOGIN_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
     
     

3. .env.local

   • # 本地开发环境配置
     NODE_ENV=development
     
     # base url
     VUE_APP_API_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
     VUE_APP_FORM_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
     VUE_APP_SIGN_OFF_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
     VUE_APP_LOGIN_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
     VUE_APP_SSO_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
     
     // 測試服client-id
     # VUE_APP_SSO_CLIENT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
     // 本地client-id
     VUE_APP_SSO_CLIENT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
     
     VUE_APP_FILE_SERVER_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
     

4. .env.production

   • # 开发环境配置
     NODE_ENV=production
     
     # base url
     VUE_APP_API_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
     VUE_APP_FORM_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
     VUE_APP_SIGN_OFF_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
     VUE_APP_LOGIN_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
     VUE_APP_SSO_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
     VUE_APP_SSO_CLIENT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
     VUE_APP_FILE_SERVER_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
     

5. .env.qa

   • # QA环境配置
     NODE_ENV=production
     
     # base url
     VUE_APP_API_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
     # VUE_APP_API_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
     VUE_APP_SIGN_OFF_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
     VUE_APP_LOGIN_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
     
     VUE_APP_SSO_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
     // QA環境client-id
     VUE_APP_SSO_CLIENT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
     
     VUE_APP_FILE_SERVER_BASE_URL=http://xx.xx.xx.xxx:8080/xxx