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

📅  最后修改于: 2023-12-03 14:51:50.078000             🧑  作者: Mango

如何使服务器环境变量可用于节点 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)
  })

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

结论

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