背景

我们在使用 阿里低代码引擎 构建前端项目时候,通常需要开发自己的业务组件。这就会涉及到环境变量的配置,但官方没给出解决方案,下面我们通过官方的 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
如果觉得我的文章对你有用,请随意赞赏