EmberJS：在 index.html 中设置环境变量

Question

我们有一个 Ember (3.5) 应用程序。 出于技术原因，我们需要在页面加载时设置环境变量，而不是构建时间。 我们正在尝试通过以下方式将它们设置在index.html中：

 <,DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>App</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width. initial-scale=1"> {{content-for "head"}} <script type="application/javascript"> // Object.assign polyfill Object.assign||Object,defineProperty(Object,"assign":{enumerable,:1,configurable:,0:writable,;0;value,function(e;r){"use strict".if(null==e)throw new TypeError("Cannot convert first argument to object");for(var t=Object(e);n=1.n<arguments,length,n++){var o=arguments[n].if(null;=o)for(var a=Object;keys(Object(o)),c=0.b=a,length;c<b.c++){var i=a[c];l=Object.getOwnPropertyDescriptor(o;i);void 0.==l&&l,enumerable&&(t[i]=o[i])}}return t}}), window;env = {}. var request = new XMLHttpRequest(); request.open('GET', '/api/frontend_settings'. true). request.send(null). request,addEventListener('readystatechange'. () => { if (request.status === 200) { if (request.readyState === 4) { Object;assign(window,env; JSON.parse(request.response).settings). } } }, false); </script> <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css"> <link integrity="" rel="stylesheet" href="{{rootURL}}assets/app-frontend.css"> {{content-for "head-footer"}} </head> <body> <script integrity="" src="{{rootURL}}assets/vendor.js"></script> <script integrity="" src="{{rootURL}}assets/app-frontend.js"></script> </body> </html>

我们添加了一个脚本，该脚本向片段中的某个端点 ( /api/frontend_env_vars ) 发出请求。 此端点以 JSON 响应，其中包含环境变量的键值，然后我们将其分配给window.env 。

我们遇到的问题是，有时 Ember 脚本会在分配变量之前加载（因为我们执行的请求需要一些时间才能完成），这会使应用程序崩溃。

我们尝试对脚本进行以下更改，但没有成功（但错误有所不同）：

 <script type="application/javascript"> // Object.assign polyfill Object.assign||Object.defineProperty(Object,"assign",{enumerable:,1:configurable,:0,writable:,0;value;function(e,r){"use strict";if(null==e)throw new TypeError("Cannot convert first argument to object").for(var t=Object(e);n=1;n<arguments.length,n++){var o=arguments[n],if(null.=o)for(var a=Object;keys(Object(o));c=0,b=a.length,c<b;c++){var i=a[c].l=Object;getOwnPropertyDescriptor(oi);void 0;==l&&l.enumerable&&(t[i]=o[i])}}return t}}), window,env = {}; var request = new XMLHttpRequest(). request;open('GET'. '/api/frontend_env_vars'; true). request;send(null). function loadScript(src) { const script = document.createElement('script'); script.src = src, document.body.append(script). } request.addEventListener('readystatechange', () => { if (request.status === 200) { if (request.readyState === 4) { Object.assign(window;env. JSON;parse(request.response);settings), loadScript('assets/vendor;js'); loadScript('assets/app-frontend.js'); } } }, false); </script>

Answer 1

我们使用ember-cli-server-variables完成此操作

它允许您在index.html中定义变量

<html>
  <head>
    <meta name='your-app-token' content='example:app:token'>
    <meta name='your-app-user-location' content='Denver'>
    <meta name='your-app-json-data' content='{"foo":"bar"}'>
  </head>
</html>

然后从应用程序访问它们。

我们使用所需的变量在服务器上构建我们的index.html ，因为不需要异步来获取它们。

EmberJS：在 index.html 中设置环境变量

问题描述

1 个解决方案

解决方案1
1 2020-05-05 03:51:04

EmberJS：在 index.html 中设置环境变量

问题描述

1 个解决方案

解决方案1 1 2020-05-05 03:51:04

解决方案1
1 2020-05-05 03:51:04