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