技术文摘
如何在JavaScript中设置环境变量
2025-01-10 19:05:23 小编
如何在JavaScript中设置环境变量
在JavaScript开发过程中，设置环境变量是一项重要技能，它能让代码在不同环境下灵活运行。无论是开发Web应用、Node.js服务，还是进行React Native移动开发，合理利用环境变量都有助于提升项目的可维护性和扩展性。
对于客户端JavaScript，也就是运行在浏览器中的代码，通常使用window对象来模拟环境变量。例如，可以在HTML页面的<script>标签中设置一个全局变量：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置环境变量</title>
</head>
<body>
<script>
window.API_URL = "https://example.com/api";
function fetchData() {
fetch(window.API_URL)
.then(response => response.json())
.then(data => console.log(data));
}
fetchData();
</script>
</body>
</html>
不过这种方式安全性较低，因为变量直接暴露在客户端。
在Node.js环境里，设置环境变量更加灵活且安全。可以在系统级别设置环境变量。在Linux或macOS系统中，使用export命令，如export NODE_ENV=production；在Windows系统中，通过“系统属性” -> “高级” -> “环境变量”来设置。在Node.js代码里，通过process.env对象来访问这些变量。
const env = process.env.NODE_ENV;
if (env === 'production') {
console.log('运行在生产环境');
} else {
console.log('运行在开发环境');
}
在基于Node.js的框架（如Express）中，还可以使用.env文件来管理环境变量。首先安装dotenv库：npm install dotenv。然后在项目根目录创建.env文件，例如：
DB_CONNECTION_STRING=mongodb://localhost:27017/mydb
SECRET_KEY=mysecret
在代码中引入dotenv：
require('dotenv').config();
const dbConnection = process.env.DB_CONNECTION_STRING;
const secretKey = process.env.SECRET_KEY;
对于React应用，可在项目根目录创建.env文件。以创建REACT_APP_ 开头的变量为例：
REACT_APP_API_KEY=your_api_key
在React组件中通过process.env访问：
import React from'react';
const apiKey = process.env.REACT_APP_API_KEY;
function App() {
return (
<div>
<p>API Key: {apiKey}</p>
</div>
);
}
export default App;
通过这些方法，能轻松在不同的JavaScript环境中设置和使用环境变量，让代码在不同部署场景下更具适应性。