Nuxt + Axios作为插件请求失败404

Question

所以我开始尝试nuxt，我正处于需要axios的地步但我不能使用nuxt's axios module。

这是文件

nuxt.config.js

module.exports = {
  generate: {
    routes: ['/']
  },
  head: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Flynd FMS' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  loading: { color: '#3B8070' },
  modules: [
    '@nuxtjs/router',
    '@nuxtjs/dotenv'
  ],
  plugins: [
    {src: '@/plugins/axios.js', ssr: true},
    {src: '@/plugins/vuex-router-sync.js', ssr: false}
  ],
  build: {
    vendor: ['axios'],
    extend (config, ctx) {
      if (ctx.dev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

插件/ axios.js

import axios from 'axios'

const instance = axios.create({
  baseURL: process.env.API_HOST + ':' + process.env.API_PORT,
  transformRequest: function (request) {
    return request
  }
})

export default instance

信息页/ Login.vue

<template>
</template>
<script>
</script>

在这种状态下，axios实例应该没有被调用过一次，但奇怪的是它会产生一个提到Request failed with status code 404的错误页面

我怀疑它试图点击axios的baseUrl，我通过检查nginx访问日志确认了它。

这是预期的行为吗？如果没有，有人能指出我如何避免这种情况吗？

谢谢！

更新

好的，我通过将ssr更改为false

将其发布后几分钟就完成了

nuxt.config.js

module.exports = {
    plugins: [
        {src: '@/plugins/axios.js', ssr: false}
    ]
}

但是我会保持这个问题的开放，因为在ssr模式下的这种行为仍然是意外的。

Answer 1

如果您在nuxt.js上使用最新版本，它将安装哪个模块。 只需按一下空格以选择“ Axios”，然后就可以了。

See Img here

然后，您可以为所有调用建立全局函数。

---

这是所有get调用的全局函数。
不要忘记将此文件包含在中间件文件夹中。

submit

---

这是调用全局函数的方式。

<form>