技术文摘

如何在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环境中设置和使用环境变量，让代码在不同部署场景下更具适应性。

TAGS: 环境变量 JavaScript编程 JavaScript开发 JavaScript环境变量

万千站长工具

技术文摘

如何在JavaScript中设置环境变量

如何在JavaScript中设置环境变量

欢迎使用万千站长工具！