📅  最后修改于: 2023-12-03 14:51:50.078000             🧑  作者: Mango
很多时候我们会需要在前端使用后端的数据或者配置项,但是这些数据或者配置项可能存在于服务器的环境变量中。那么我们该如何在前端浏览器中使用这些环境变量呢?
这种方案比较简单,在后端将环境变量传递给前端即可。可以将环境变量放在后端返回的 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 是常用的前端构建工具,可以将多个文件打包成一个或多个文件,同时对于打包后的代码,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 请求获取环境变量。后端可以提供一个接口,用于查询环境变量。
例如,在 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)
})
这种方案比较灵活,但是需要前后端都写代码。同时需要注意跨域问题。
以上是三种常用的方案,根据实际情况选择合适的方案即可。