Question

我有以下HTML文件，并且process.env变量为 process.env.var1='abc'，但是一旦加载了应用程序，该变量就未定义。

res.send(`
   <html>
   <head>
       <link href="${process.env.var1}" rel="stylesheet">

       </script>

   </head>
   <body>
      <div id="react-root"></div>
  </body>
</html>`);

Answer 1

process.env是您的环境通过Node Js提供的全局变量。但是我们的浏览器中没有Node js，我们将使用webpack。

因此您可以使用configure webpack definePlugin创建全局常量

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  entry: './index.js',
 plugins: [
     new webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': '"production"'
        }
    })
 ]
};

//index.js
console.log(process.env);

console.log(process.env.NODE_ENV);

Answer 2

定义一个常量变量css，以后可以在html标签中使用。

  let css =  `<link href="${process.env.var1}" rel="stylesheet">`;
  res.send(`
     <html>
       <head>
           ${css}
       </head>
     <body>
        <div id="react-root"></div>
    </body>
  </html>`);

我如何在React HTML文件中访问process.env变量

2 个答案: