将服务器数据添加到 index.html答案

【问题标题】：Add server data to index.html将服务器数据添加到 index.html
【发布时间】：2017-05-24 13:41:40
【问题描述】：

我用Create React App 构建了一个简单的应用程序。我想在 jinja 模板中注入一些服务器数据。显然本地 webpack 服务器无法解析 jinja

<script type="text/javascript">
    window.SERVER_DATA = {
      "company": {{ company|dumps|escapejson }}
    };
</script>

我无权访问 index.html 中的 process.env.NODE_ENV !== "production"。 还有其他可以使用的标志吗？

或者，我可以使用try and catch

   try {
     window.SERVER_DATA = __SERVER_DATA__;
    } catch(e) {
      console.info('Development MODE', e)
      window.SERVER_DATA = {};
    }

但这是一个语法错误。

【问题讨论】：

我会考虑使用例如Webpack 如果您想访问 index.html 中的 NODE_ENV，这就是 Vue 在构建 Vue 应用程序时创建其开发/生产版本的方式。
@SimonHyll index.html 中没有process
否，但您可以生成 index.html 或 index.js，将 process.NODE_ENV 变量设置为“生产”或“开发”，因为您可能会生成您的网站无论是开发还是发布，这都是你想要的，对吧？因此，只需让您的生成器（我建议使用 Webpack）将该变量插入到您的代码中。轻松愉快。

【解决方案1】：

看来最好的办法就是捕捉错误

try {
  window.pagedata = __SERVER_DATA__;
} catch(e) {
  console.info('Dev mode');
}

然后

settings_page = render_template('index.html')
return settings_page.replace(
    '__SERVER_DATA__', escapejson(dumps(server_data))
)

【讨论】：