EmberJS：在 index.html 中设置环境变量
[英]EmberJS: Set environment variables in index.html
问题描述
We have an Ember (3.5) application.
我们有一个 Ember (3.5) 应用程序。 For technical reasons we need environment variables to be set on page load, as opposed to build time.出于技术原因，我们需要在页面加载时设置环境变量，而不是构建时间。 We're trying to set them in index.html the following way:我们正在尝试通过以下方式将它们设置在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>
We added a script which makes a request to some endpoint ( /api/frontend_env_vars ) in the snippet.我们添加了一个脚本，该脚本向片段中的某个端点 ( /api/frontend_env_vars ) 发出请求。 This endpoint responds with a JSON with the key-values of environment variables which we then assign to window.env .此端点以 JSON 响应，其中包含环境变量的键值，然后我们将其分配给window.env 。
The problem we have is that sometimes Ember scripts load before the variables have been assigned (since we do a request that takes some time to complete), which makes the application crash.我们遇到的问题是，有时 Ember 脚本会在分配变量之前加载（因为我们执行的请求需要一些时间才能完成），这会使应用程序崩溃。
We tried the following alteration to the script, but it didn't work (the error was different, though):我们尝试对脚本进行以下更改，但没有成功（但错误有所不同）：
<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>
1 个解决方案
解决方案1
1 2020-05-05 03:51:04
We accomplish this using ember-cli-server-variables我们使用ember-cli-server-variables完成此操作
Which allows you to define variables in index.html它允许您在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>
and then access them from the application.然后从应用程序访问它们。
We build our index.html on the server with the needed variables to there is no async needed to fetch them.我们使用所需的变量在服务器上构建我们的index.html ，因为不需要异步来获取它们。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.