且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何在Azure托管的React应用中使用环境变量

更新时间:2023-09-21 19:01:16

作为更新,它与我的原始方法有所不同,但是我已经经历了使用DotEnv并因此使用.env文件的方法.会使用库变量在VSTS中即时生成,因此不会将其存储在源代码管理中.

As an update, it's a bit different then my original approach, but I've gone through the route of using DotEnv and thus using .env files, which I will generate on the fly in VSTS, using the library variables, and thus NOT storing them in source control.

要使用DotEnv,我更新了webpack.config. const Dotenv = require('dotenv-webpack');

To use DotEnv, I updated the webpack.config; const Dotenv = require('dotenv-webpack');

module.exports = {
    ...
    plugins: [
        new Dotenv()
    ],

然后基本上,我创建了一个包含参数的.env文件

Then basically, I created a .env file containing my parameters

MD_API_URL = http://localhost:7623/api/

为了能够在我的TSX文件中使用它们,我只使用process.env;

And to be able to consume them in my TSX files I just use process.env;

static getCustomer(id) {
    return fetch(process.env.MD_API_URL + 'customers/' + id, { mode: 'cors' })
        .then(response => {
        return response.json();
    }).catch(error => {
        return error;
    });
}