vue 定义了axios但报错无法找到

Question

index中

main中

index router

报错

Answer 1

把router的index.js里面的路由对象的components改成component

components是用来对多个路由出口进行渲染的

另外Vue.prototype.$axios = axios这种方式引用axios是没毛病的。

Answer 2

首先你访问的方式就不对。组件里面的this是在vue.component 中也就是当前环境是vue.component的实例继承的自然是VueComponent这个类，而你赋值的类是Vue。所以压根访问不到

而你应该这样访问

vm才是Vue的实例，

这样才能访问到

Answer 3

我想知道你是从哪看的可以这样用的……？
而且你直接 axios('/api/getNewList') 不好么…为什么要让自己多写一点……

Answer 4

npm install axios --save后
直接在build文件夹下webpack.base.conf.js
module.exports里面增加：

plugins: [
    new webpack.ProvidePlugin({
          axios: 'axios',
      })
  ]

就能全局调用axios了

Answer 5

我一般通过new Axios，创建一个实例给接口使用，方便统一配置和拦截

const axios = Axios.create({
  withCredentials: true,
  timeout: 10000,
  headers: {
    'Accept': 'application/json;charset=utf-8'
  }
})

axios.interceptors.request.use(async config => {
  let userSelf = vuet.getModule('user-self')
  if (userSelf && userSelf.token) {
    await userSelf.updateToken(40)
    return config
  } else {
    return config
  }
})

axios.interceptors.response.use((response) => {
  let {status, data} = response
  if (status === 200 || status === 201) {
    // ...
  }
}

const post=...
const remove =...
export {axios, get, post, put, remove as delete}
别的地方用的时候，import下也不是难事

import ApiUtils from '@/api/'
...
ApiUtils.get('/api/auth/menu')
ApiUtils.delete(`/api/auth/menu/${id}`)

Answer 6

你们是怎么弄的，挂载全局上怎么没用了

Answer 7

我的这个方式没问题，原来是我的router里component 多加了个s然后就全部失效了。。