Question

创建React App会生成一个静态html，用于绑定组件。我想知道是否可以根据我们所处的环境更改内容。

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
</body>

例如，是否可以根据React应用的运行位置将标题设为"develop"和"production"？

仅使用reactjs env配置文件而无需任何服务器端渲染就可以实现吗？

编辑：...而且没有弹出并处理webpack配置吗？

Answer 1

我有一个解决方案，无需假设您的开发和生产网址不同

您可以从window.location.href获取当前网址，并根据该网址可以更改react应用的标题。

但是，我认为环境变量将是一个更好的解决方案

Answer 2

您最好在CRA对象中运行npm run eject。您将找到一个名为config的文件夹，以将HtmlWebpackPlugin从webpack.config.dev.js和webpack.config.prod.js更改：

…
new HtmlWebpackPlugin({
  inject: true,
  template: **CHNAGE ME**,
…

是否可以使用reactjs CRA为不同的环境呈现不同的html

2 个答案: