Nuxt + View + Axios +环境变量

Question

我无法使用环境变量为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)

和

// index.vue (front page as it appears on the client)

populateFilters () {
  Vue.axios.get('filters').then((response) => {
    this.$store.commit('data/filters', response.data)
  })
    .catch((e) => {
      console.error(e)
    })
}

在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
    }
  }
},

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

console.log(process.env.BASE_URL)

这意味着每当没有设置axios的baseUrl时，axios（可能）默认为GET http://localhost:3000/filters 404 (Not Found) 。

我认为问题是什么

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

我需要的

我需要能够：

1. 创建包含BASE_URL（以及其他内容）的.env文件
2. 在代码中的某处定义这些环境变量（qazxsw poi？）

解决方案请参阅接受的答案

另外，安装nuxtjs / dotenv

http://localhost:3000

并让你的nuxt.config.js看起来像：

npm install @nuxtjs/dotenv

请注意，nuxt.config.js必须位于顶部

Answer 1

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

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

  module.exports = {

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

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

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

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

require('dotenv').config()

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