Vue.js Nuxt&x2B；Vue+；Axios+；环境变量

我无法使用环境变量为axios提供baseUrl

我正在使用nuxt/vue/axios

我的大致情况是：

// axios.js

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

axios.defaults.baseURL = process.env.BASE_URL
Vue.use(VueAxios, axios)

及

以及在nuxt.config.js中

  // nuxt.config.js
  build: {
    extractCSS: true,
    extend (config, ctx) {
    // Run ESLint on save

    const envLoad = require('dotenv').config()

    if (envLoad.error){
      throw result.error
    }
  }
},

modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    ['@nuxtjs/axios', {
      baseURL: 'http://jsonplaceholder.typicode.com'
    }]
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

console.log（process.env.BASE\u URL）

在CMD中打印正确的连接字符串，但是，在chrome web浏览器中，它输出“undefined”，我得到以下错误

GET http://localhost:3000/filters 404 (Not Found)

这意味着axios（可能）默认为

http://localhost:3000

未设置axios的baseUrl时

我认为问题在于

nuxt加载的服务器/客户端对具有不同的上下文，或者服务器在加载环境变量之前加载axios

我需要什么

我需要能够：

创建包含基本URL的.env文件

在代码中的某个地方定义这些环境变量（

numxt.config.js

？）

解决方案 请看接受的答案

此外，请安装nuxtjs/dotenv

npm install @nuxtjs/dotenv

并使您的

numxt.config.js

看起来像：

  // nuxt.config.js
  require('dotenv').config()

  module.exports = {

  modules: [
  '@nuxtjs/dotenv',
      '@nuxtjs/axios',
  ],

  axios: {
    baseURL: process.env.BASE_URL
  },
}

---

请注意，

require（'dotenv'）.config（）

必须位于顶部

您可以使用nuxt axios模块。您可以在nuxt.config.js的模块部分t中声明它，这样您就不需要文件axios.js。这里描述了这一点

通过将其加载到nuxt.config.js文件中的模块中，您的axios实例将可以在组件中访问此$axios

您可以在nuxt.config.js中声明基本url

  // nuxt.config.js
  build: {
    extractCSS: true,
    extend (config, ctx) {
    // Run ESLint on save

    const envLoad = require('dotenv').config()

    if (envLoad.error){
      throw result.error
    }
  }
},

modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    ['@nuxtjs/axios', {
      baseURL: 'http://jsonplaceholder.typicode.com'
    }]
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

---

对于“其他环境变量”，您可以使用vuex存储区使其可用于所有组件。

请看，这正是我一直在做的事情代码现在可以工作了，并且代码结构得到了很好的改进，非常好，谢谢you@Pjotr你知道如何使用Axios的插件实例来处理错误吗，我试图使用SweetAlert在请求服务器失败时显示一个警报错误，但仅仅调用它是无效的。