nuxtJs中直接使用自带的@nuxtjs/axios

Posted JaydenLD@Clara

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了nuxtJs中直接使用自带的@nuxtjs/axios相关的知识,希望对你有一定的参考价值。

最初我以为在nuxtjs中是需要重新npm install axios,但是其实nuxtjs自己集成了这个数据渲染方法

你只需在nuxt.config.js中配置一下就可以了

modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    \'@nuxtjs/axios\'
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    proxy: true,
    prefix: \'/api/\',
    credentials: true
    // See https://github.com/nuxt-community/axios-module#options
  },

  proxy: {
    \'/api/\': { 
      target: \'https://h5api.zhefengle.cn\',//这个网站是开源的可以请求到数据的
      pathRewrite: {
         \'^/api/\': \'/\',
         changeOrigin: true
      }    
    }
  },

然后在你的页面可以直接请求数据了

mounted() {
        this.$axios.get("/index.html").then(res=>{
            console.log(res)
        })
    },

最后进入这个页面,在控制台看到打印即表示请求成功了

 

以上是关于nuxtJs中直接使用自带的@nuxtjs/axios的主要内容,如果未能解决你的问题,请参考以下文章

nuxtjs中修改head及vuex的使用

NUXTJS + Vuetify - SCSS 中的颜色

为啥在 NuxtJS 中作为 prop 传递时,图像路径没有被 require() 解析?

NuxtJS项目——模块

nuxtjs/vuejs 中带有尾风类的动态类绑定

如何在 NuxtJS 的 asyncData 中使用 Promise