需要npm axios？

剛開始，我以為需要像普通的vue SPA開發那樣，需要npm axios，這種方式的確可以生效。但在使用時並不方便。尤其是設定代理比較麻煩，而且在asyncData裡與在普通methods裡使用方式不一樣。
後來在nuxt的github上發現了nuxt是預設整合了axios的，所以不需要npm axios，但是需要進行適當的配置。

以上是百度到的，發現老是報錯，現在網上的教程完全是在扯淡，npm axios 是不需要安裝了，但是 @nuxtjs/axios 要安裝啊

 

第一步：

npm 安裝@nuxtjs/axios，檔案根目錄下安裝，指令如下

npm install @nuxtjs/axios

 

第二步：

在  nuxt.config.js 檔案中 配置 axios 和 proxy 代理  如下圖：

方便你複製~~~~ 

import pkg from './package'

export default {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  /*
  ** Global CSS
  */
  css: [
    'iview/dist/styles/iview.css'
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '@/plugins/iview'
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/axios'
  ],

  axios: {
    proxy: true, // 表示開啟代理
    prefix: '/api', // 表示給請求url加個字首 /api
    credentials: true // 表示跨域請求時是否需要使用憑證
  },

  proxy: {
    '/api': { 
      target: 'https://www.apiopen.top', // 目標介面域名
      pathRewrite: {
        '^/api': '/', // 把 /api 替換成 /
        changeOrigin: true // 表示是否跨域
      }    
    }
  },

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    },
    vendor: ['axios'] // 為防止重複打包
  }
}

 

第三步：

在元件中使用

<template>
  <div>my</div>
</template>
<script>
export default {
  created () {
    this.allList()
  },
  methods: {
    allList () {
      this.$axios.post(`/novelSearchApi?name=盜墓筆記`).then(res => {
        console.log(res)
      })
    }
  }

}
</script>
<style scoped>
</style>