时间戳

首页 > 解决方案 > .env webpack 传递环境变量的值，但应用程序不起作用

javascript - .env webpack 传递环境变量的值，但应用程序不起作用

问题描述

项目根目录中的 .env 文件：

ESRI_KEY=api_key_value

对于 webpack 配置，我有：

const webpack = require('webpack');

const Dotenv = require('dotenv-webpack');


module.exports = {

//----//
  
  plugins: [

    new Dotenv(),
  ],
};

代码是：

console.log(process.env.ESRI_KEY);
const ESRI_KEY = process.env.ESRI_KEY;

const geocodeService = L.esri.Geocoding.geocodeService({
  apikey: `{ESRI_KEY}`,
});

我尝试了不同的传递组合，比如

apikey: `${ESRI_KEY}`
apikey: ESRI_KEY

他们都工作。实际上，我可以在控制台中看到 ESRI_KEY 值，并且可以在 dist 文件夹中看到它 ether 隐藏在可见状态（取决于传递的语法）。控制台中没有错误，但由于某种原因，除非我传递直接值，否则什么都不会发生，例如：

const geocodeService = L.esri.Geocoding.geocodeService({
  apikey: 'api_key_value',
});

应该会出现一个弹出窗口，其中包含单击位置的地址（如果直接传递 api_key_value 或简单地使用具有该值的另一​​个 js 文件并将其放在 HTML 中我的主 js 顶部，则它可以工作）但它没有t 与 .env 一起工作，我不知道为什么以及如何解决它。

在 python 中，我只有一个这样的数据库密码问题。不管其余的环境变量如何，Postgresql 在我的 main.py 中只接受直接的 password_value。因此，我试图了解我的问题是否与 code/webpack/.env 或某些特定键有关。

标签： javascriptwebpackapi-keydotenv

解决方案

/* root_project/webpack.config.js */

在根项目文件夹中放置一个 .env 文件

const DotEnvWebpackPlugin = require('dotenv-webpack');


const DotEnvWebpack = new DotEnvWebpackPlugin({
    /**
     * systemvars: true
     * load all the predefined 'process.env' variables which will
     * trump anything local per dotenv specs. (useful for CI purposes)
     */
    systemvars: true,
    safe: true, // load '.env.example' to verify the '.env' variables are all set.
    path: path.join(__dirname, `.env`),
  });

然后在插件数组中

...
plugins : [
...,
DotEnvWebpack,
]

然后您可以使用 .env 中定义的变量和 process.env 的所有变量

/* .env */

ESRI_KEY=api_key_value

console.log(process.env.ESRI_KEY);
const ESRI_KEY = process.env.ESRI_KEY;

推荐阅读