读取与Spring Boot捆绑的React中的环境变量
可以通过以下步骤实现：
- 在React项目中创建一个名为
.env的文件，该文件用于存储环境变量。在该文件中，可以定义各种环境变量及其对应的值。例如：
REACT_APP_API_URL=http://api.example.com
REACT_APP_API_KEY=1234567890- 在React组件中使用环境变量。可以通过
process.env对象来访问环境变量的值。例如，要访问上述示例中的REACT_APP_API_URL环境变量，可以使用process.env.REACT_APP_API_URL。
import React from 'react';
const MyComponent = () => {
const apiUrl = process.env.REACT_APP_API_URL;
// 使用apiUrl进行其他操作
return (
<div>
{/* 组件内容 */}
</div>
);
};
export default MyComponent;- 在Spring Boot中配置代理以将环境变量传递给React应用。在
application.properties文件中添加以下配置：
spring.resources.static-locations=classpath:/static/
spring.mvc.view.prefix=/static/
spring.mvc.view.suffix=.html- 在Spring Boot的控制器中，将环境变量传递给React应用。可以使用
@Value注解来获取环境变量的值，并将其作为模型属性传递给视图。
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class MyController {
@Value("${REACT_APP_API_URL}")
private String apiUrl;
@GetMapping("/")
public String index(Model model) {
model.addAttribute("apiUrl", apiUrl);
return "index";
}
}- 在React应用的入口文件中，使用
${apiUrl}来访问传递的环境变量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script>
window.apiUrl = "${apiUrl}";
</script>
<script src="/static/js/main.js"></script>
</body>
</html>通过以上步骤，可以在Spring Boot捆绑的React应用中读取并使用环境变量。这种方式可以方便地在不同环境中配置不同的值，例如开发环境、测试环境和生产环境。同时，这种方式也可以保护敏感信息，如API密钥等，避免将其直接暴露在代码中。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）、腾讯云云数据库MySQL版、腾讯云云原生容器服务（TKE）等。您可以在腾讯云官网（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。
相关·内容
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
腾讯云开发者
