axios 无法读取nuxtjs中的env变量？

hjzp0vay 于 2023-06-22 发布在 iOS

关注(0)|答案(2)|浏览(221)

我使用nuxtjs 3，我试图设置一个axios示例，所以我在.\plugins文件夹中创建一个文件，然后我把我的配置文件放在另一个文件夹中，这个文件导出一个对象，我将使用它来创建我的axios示例。我这样设置是因为将来的某个时候我可以重用它。在我的插件中，我试图创建一个axios示例，但我意识到我得到了未定义的baseUrl。
我正在尝试为我的项目设置一个nuxtjs 3的基本代码。你能给我推荐一个公共的git repo例子吗
配置

export default {
    baseURL: process.env.BASE_URL,
    timeout: 1000,
    headers: {'X-Custom-Header': 'foobar'}
}

import axios from "axios";
import config from "@/config/axios-config.js";

export default defineNuxtPlugin(() => {
    return {
        provide: {
            hello: () => {
                const instance = axios.create(config);
                console.log(config);
                return instance;
            },
        },
    };
});

axios

来源：https://stackoverflow.com/questions/76431960/can-not-read-env-varible-in-nuxtjs

2条答案

按热度按时间

klr1opcd1#

如果你想在nuxt 3 app中使用.env变量，你需要这样做：
1.通过npm或yarn安装@nuxtjs/dotenv

npm install --save-dev @nuxtjs/dotenv

1.打开项目根目录中的nuxt.config.js文件，并添加以下代码：

export default {
  // Other Nuxt 3 configuration options

  vite: {
    plugins: [
      require('dotenv').config()
    ]
  }
};

1.现在你可以在任何组件或js文件中使用.env变量：
在模板中使用：

<template>
  <div>
    <p>API Base URL: {{ $env.API_BASE_URL }}</p>
    <p>API Key: {{ $env.API_KEY }}</p>
  </div>
</template>

在脚本中使用：

<script>
export default {
  mounted() {
    console.log('API Base URL:', this.$env.API_BASE_URL);
    console.log('API Key:', this.$env.API_KEY);
  }
};
</script>

关于@nuxtjs/dotenv软件包的更多信息：https://www.npmjs.com/package/@nuxtjs/dotenv

赞(0）回复(0）举报 2023-06-22

hpxqektj2#

这是一个有趣的，我有一个类似的问题，并发现我不得不做以下与Vite可能适用于什么nuxtJS使用其引擎盖太？
在配置中使用process.env.BASE_URL，基本上是构建或服务器服务运行时涉及的任何文件。
在实际应用程序项目代码中使用import.meta.env.BASE_URL。

赞(0）回复(0）举报 2023-06-22