如何使服务器环境变量可用于节点 js 前端的浏览器 - Shell-Bash

很多时候我们会需要在前端使用后端的数据或者配置项，但是这些数据或者配置项可能存在于服务器的环境变量中。那么我们该如何在前端浏览器中使用这些环境变量呢？

方案一：通过后端将环境变量传递给前端

这种方案比较简单，在后端将环境变量传递给前端即可。可以将环境变量放在后端返回的 json 数据中，或者通过模板引擎渲染时将环境变量传递给模板。

例如，在 Node.js 中，可以使用 express 框架，在路由中将环境变量传递给模板：

app.get('/', function(req, res){
  res.render('index', { env: process.env });
});

在前端的模板中，可以直接使用数据：

<p>当前 NODE_ENV 环境为：{{env.NODE_ENV}}</p>
<p>当前运行的端口为：{{env.PORT}}</p>

这种方案的优点是简单易懂，但是需要在前端和后端代码中都要写逻辑处理。

方案二：使用 Webpack DefinePlugin

Webpack 是常用的前端构建工具，可以将多个文件打包成一个或多个文件，同时对于打包后的代码，Webapck 还提供了一些处理方式。

Webpack 提供了 DefinePlugin，通过 DefinePlugin 可以将环境变量注入到前端的代码中。具体使用方式如下：

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      API_URL: JSON.stringify(process.env.API_URL),
    },
  }),
],

在前端的代码中，就可以直接使用这些环境变量了：

console.log(process.env.NODE_ENV)
console.log(process.env.API_URL)

这种方案的优点是避免了前后端传递数据，但是需要在配置文件中指定环境变量。

方案三：使用 HTTP 请求获取环境变量

这种方案比较灵活，在前端通过 HTTP 请求获取环境变量。后端可以提供一个接口，用于查询环境变量。

例如，在 Node.js 中，可以使用 express 框架，在路由中提供一个查询接口：

app.get('/env', function(req, res){
  res.json(process.env);
});

在前端的代码中，可以使用 fetch API 发起 HTTP 请求：

fetch('/env')
  .then(res => res.json())
  .then(env => {
    console.log(env.NODE_ENV)
    console.log(env.PORT)
  })

这种方案比较灵活，但是需要前后端都写代码。同时需要注意跨域问题。

结论

以上是三种常用的方案，根据实际情况选择合适的方案即可。