Nuxt使用axios请求后端数据及发布

代码语言：javascript复制

npm install axios -s

在plugins新建axios文件配置公共请求 … vue页面导入

代码语言：javascript复制

  import axiosApi from "../plugins/axios";

在asyncData进行请求渲染数据

代码语言：javascript复制

  export default {
    data() {
      return {
        info: []
      }
    },

    async asyncData() {
      const res = await axiosApi("getData", {}, "post")
      return {
        info: res.data.top_four
      }
    },
  }

asyncData方法

asyncData 方法会在组件每次加载之前被调用 asyncData 可以在服务端或路由更新之前被调用 asyncData 返回的数据融合到组件的data方法 asyncData 方式是在组件初始化前被调用，方法内饰无法通过this来引用组件的实例对象

打包发布到服务器

代码语言：javascript复制

npm run generate

查看源代码可以查看请求到的数据

打包 axios data plugins 服务端

0 人点赞