一、背景

这次用Html写vue项目的，但是突然报错$axios is not defined

二、解决策略

2.1 添加依赖的 js

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>  
<script src="./apis/request.js"></script>
<script src="./apis/api.js"></script>

2.2 request.js

(function (win) {
  axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
  // 创建axios实例
  const service = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: '/',
    // 超时
    timeout: 100000
  })
  // request拦截器
  service.interceptors.request.use(config => {
    let token = localStorage.getItem('token');
    // 是否需要设置 token
    if (token) {
      config.headers["authorization"] = token;
    }
    // get请求映射params参数
    if (config.method === 'get' && config.params) {
      let url = config.url + '?';
      for (const propName of Object.keys(config.params)) {
        const value = config.params[propName];
        var part = encodeURIComponent(propName) + "=";
        if (value !== null && typeof(value) !== "undefined") {
          if (typeof value === 'object') {
            for (const key of Object.keys(value)) {
              let params = propName + '[' + key + ']';
              var subPart = encodeURIComponent(params) + "=";
              url += subPart + encodeURIComponent(value[key]) + "&";
            }
          } else {
            url += part + encodeURIComponent(value) + "&";
          }
        }
      }
      url = url.slice(0, -1);
      config.params = {};
      config.url = url;
    }
    return config
  }, error => {
      console.log(error)
      Promise.reject(error)
  })

  // 响应拦截器
  service.interceptors.response.use(res => {
      console.log('---响应拦截器---',res)
      // 未设置状态码则默认成功状态
      const code = res.data.code;
      // 获取错误信息
      const msg = res.data.msg
      console.log('---code---',code)
      if (res.data.code === 0 && res.data.msg === 'NOTLOGIN') {// 返回登录页面
        console.log('---/backend/page/login/login.html---',code)
        localStorage.removeItem('userInfo')
        window.top.location.href = '/templates/backend/page/login/login.html'
      } else {
        return res.data
      }
    },
    error => {
      console.log('err' + error)
      let { message } = error;
      if (message == "Network Error") {
        message = "后端接口连接异常";
      }
      else if (message.includes("timeout")) {
        message = "系统接口请求超时";
      }
      else if (message.includes("Request failed with status code")) {
        message = "系统接口" + message.substr(message.length - 3) + "异常";
      }
      window.ELEMENT.Message({
        message: message,
        type: 'error',
        duration: 5 * 1000
      })
      return Promise.reject(error)
    }
  )
  win.$axios = service
})(window);

2.3 api.js

// 查询列表接口
const getPage = (params) => {
    return $axios({
        url: '/area/getPage',
        method: 'get',
        params
    })
}

2.4 调用接口

<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                page: 1,
                size: 10,
                total:100, 
            }
        },
        created(){
            this.init()
        }
        ,
        methods: {
            async init(){
                await getPage({'page': this.page, 'size': this.size}).then(res => {
                    console.log(res)
                })
            } 
        }
    })
</script>