我的 env 變量在 localhost 上工作，但在 Netlify 上部署時未定義

Question

無法使 axios GET 請求在 Netlify 上工作，因為定義我的 api 密鑰的環境變量在 Netlify 上未定義。 我已經使用“站點設置 > 構建和部署 > 環境 > 環境變量”設置了 env 變量。 但是當我在 Netlify 上嘗試時，我得到：

GET https://api.openweathermap.org/data/2.5/forecast?q=London&appid=undefined&units=imperial
error forecast: AxiosError: Request failed with status code 401

這是我發出 GET 請求的代碼：

import { Forecast } from './forecast';
import axios from 'axios';

export class DOM {
    static displayFiveDayForecast = (city) => {
        const BASE_URL_FIVE_DAY_FORECAST = 'https://api.openweathermap.org/data/2.5/forecast';

        axios.get(`${BASE_URL_FIVE_DAY_FORECAST}?q=${city}&appid=${process.env.API_KEY}&units=imperial`)
        .then(res => {
            const weatherObj = Forecast.createForecasts(res.data);
            const content = document.getElementById('content');

            const forecastDiv = document.createElement('div');
            forecastDiv.id = 'forecast';
            content.appendChild(forecastDiv);

            for(let value in weatherObj.forecasts) {
                const forecastBox = document.createElement('div');
                forecastBox.className = 'forecast-item';
                forecastDiv.appendChild(forecastBox);

                const date = document.createElement('div');
                date.textContent = weatherObj.forecasts[value][0];
                forecastBox.appendChild(date);

                const icon = document.createElement('img');
                icon.src = weatherObj.forecasts[value][3];
                icon.alt = 'forecast icon';
                forecastBox.appendChild(icon);

                const main = document.createElement('div');
                main.textContent = `${weatherObj.forecasts[value][1]} F\u00B0`;
                forecastBox.appendChild(main);

                const feelsLike = document.createElement('div');
                feelsLike.textContent = `Feels like ${weatherObj.forecasts[value][2]} F\u00B0`;
                forecastBox.appendChild(feelsLike);
            }
        })
        .catch(err => {console.log(`error forecast: ${err}`)})
    }
}

此 GET 請求在 localhost 上運行良好，並且 api 密鑰在此處定義。 如果該信息有幫助，我正在使用 webpack。

package.json：

{
  "name": "javascript-weather-app",
  "version": "1.0.0",
  "description": "A weather application using the openweather api",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config webpack.dev.js --open",
    "build": "webpack --config webpack.prod.js"
  },
  "author": "tgoandrex",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.27.2",
    "css-loader": "^6.7.1",
    "dotenv": "^16.0.1",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.2",
    "webpack-merge": "^5.8.0"
  }
}

webpack.common.js：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
require('dotenv').config({ path: './.env' });


module.exports = {
    entry: './src/index.js',
    plugins : [
        new HtmlWebpackPlugin({
            template: './src/template.html'
        }),
        new webpack.DefinePlugin({
            'process.env': JSON.stringify(process.env)
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

Answer 1

如果您定義了 gatsby 環境 .env 文件，那么它只適用於 gatsby 配置文件。 但是如果你需要跨站點訪問那么你必須定義前綴GATSBY_

前任。 GATSBY_BASE_URL_FIVE_DAY_FORECAST

Answer 2

所以我發現我所要做的就是在我的函數中定義一個變量並將其設置為環境變量。 我仍然不明白為什么這行得通，而直接采用process.env.API_KEY則不行。

const apiKey = process.env.API_KEY;
axios.get(`${BASE_URL_FIVE_DAY_FORECAST}?q=${city}&appid=${apiKey}&units=imperial`)