阿里低代码平台多环境变量配置

背景

我们在使用 阿里低代码引擎 构建前端项目时候，通常需要开发自己的业务组件。这就会涉及到环境变量的配置，但官方没给出解决方案，下面我们通过官方的 Demo 项目来尝试解决，并做简单记录。

分析

由于项目采用的是基于 webpack 实现的 build-scripts 进行打包的，因此可以通过 webpack.DefinePlugin 来实现。

解决

根据环境创建对应环境 .env 文件：

// .env.development
{
    API_BASE_URL: 'https://www.lervor.com'
}

// .env.production
{
    API_BASE_URL: 'https://www.baidu.com'
}

文件 build.plugin.js 中添加以下内容：

+ const webpack = require('webpack');

module.exports = ({ onGetWebpackConfig }) => {
  onGetWebpackConfig((config) => {
+     config.plugin('DefinePlugin').use(webpack.DefinePlugin, [
+       {
+         'process.env': fs.readFileSync(`./.env.${process.env.NODE_ENV}`, 'utf8')
+       }
+     ]);
  });
};

通过以下方式就可以取得上述配置文件中相应的环境变量：

process.env.API_BASE_URL

版权属于：瞭月

本文链接：https://www.lervor.com/archives/268/

版权声明：本文为瞭月原创文章，转载请附上原文出处链接和本声明。