时间戳

首页 > 解决方案 > Nuxt + Vue + Axios + 环境变量

vue.js - Nuxt + 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)

和

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

console.log(process.env.BASE_URL)在 CMD 中打印正确的连接字符串，但是，在 chrome 网络浏览器中它输出“未定义”，我收到以下错误

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

这意味着 axios（可能）默认为http://localhost:3000未设置 axios 的 baseUrl 时。

我认为问题是

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

我需要的

我需要能够：

  1. 创建包含（除其他外）BASE_URL 的 .env 文件
  2. 在代码中的某处定义这些环境变量（nuxt.config.js？）

解决方案 请查看接受的答案

另外，安装 nuxtjs/dotenv

npm install @nuxtjs/dotenv

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

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

  module.exports = {

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

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

注意require('dotenv').config()必须在顶部

标签： vue.jsenvironment-variablesaxiosnuxt.js

解决方案

您可以使用一个 nuxt axios 模块。您可以在 nuxt.config.js 的模块部分中声明它，这样您就不需要文件 axios.js。这在此处进行了描述https://github.com/nuxt-community/axios-module#usage

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

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

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 商店将它们提供给所有组件。

推荐阅读