問題タブ [quasar-framework]

次のdocker-compose構成があります

これはフロントエンド イメージの Dockerfile です

しかし、console.log(process.env) を実行すると、取得できるプロパティは 1 つだけです。

フロントエンドのすべてが正常に機能しています。私固有の問題は環境変数にあります。私の目的は、環境ごとに異なる環境変数を設定することです。

Docker のバージョン

Docker Compose バージョン

現在、Quasar-Framework（PWA）を使用してWebAppを開発しています。

シナリオ

Web ブラウザー内でテストすると、( を使用して) 正常に「インストール」されていることがわかりServiceWorkerます。URL を呼び出して、アプリの全機能を使用することができます。つまり、サーバーがダウンしていても、サーバーが稼働していたので WebApp を開いて使用できます。

問題

スマートフォン（ andAndroid 7.1.1を使用）で同じ（サーバーに到達できないときにアプリを使用する）ことを試みると、WebAppでタブを閉じるまですべて正常に動作します。URL を再度呼び出すと、アプリが開きません。Firefox Nightly V 60.0a1Chrome 64.*

私の質問

これは正常な動作ですか、それとも経験豊富な人が推奨できる特別なことを考慮する必要がありますか? それは素晴らしいことです。

どうぞよろしくお願いいたします。

aws Cognito ( Token endpoint ) の post API を呼び出そうとしています。それは私の郵便配達クライアントで完全に機能しています。しかし、VueJS コードで問題に直面しています。

以下は私のコードスニペットです。

test.vue

ログインエンドポイントから「コード」値を正常に取得して います上記のコードでは、HTTP は以下の他の JavaScript からインポートされたオブジェクトです。

http-common.js

よくわかりませんが、問題は、郵便配達員で、本文とヘッダーで「application/x-www-form-urlencoded」オプションを使用したことです。ここでは、この値を本体に設定できません。

本文のヘッダーと「application/x-www-form-urlencoded」オプションが正しく設定されていません。

{emulateJSON:true} オプションを試してみました。しかし、うまくいきませんでした！

HTTP コードを取得しています: 400

{"data":{"error":"invalid_request"},"status":400,"statusText":"Bad Request","headers":{"pragma":"no-cache","content-type" :"application/json;charset=UTF-8","cache-control":"no-cache, no-store, max-age=0, must-revalidate","expires":"0"},"config ":{"transformRequest":{},"transformResponse":{},"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":- 1,"headers":{"Accept":"application/json","Content-Type":"application/x-www-form-urlencoded"},"method":"post","baseURL":" https ://maddox.auth.eu-west-1.amazoncognito.com ","url":" https://maddox.auth.eu-west-1.amazoncognito.com/oauth2/token ","data":" {\"grant_type\":\"authorization_code\",\"client_id\":\"4jcmshlse80ab667okni41fbf5\",\"redirect_uri\":\" http://localhost:8080/callback\",\"コード\":\"e19170dc-3d8f-420e-99b6-c05f7abad313\"}"},"リクエスト":{}}

Quasar v0.15.9、Vue v2.5.0、およびマテリアル アイコンを使用してアプリを構築しています。クエーサー リスト内に折りたたみ可能なクエーサーがあります

fiber_statusアイコンを設定している VueJS メソッドにリスト項目ごとに渡しています。

3 つの異なるアイコンを設定することもできますが、同じアイコンを設定し、3 つのステータスごとにアイコンの色を設定することをお勧めします。誰でも可能になる方法を見ますか? スタイルはコンポーネント レベルに設定されてstylusおり、Quasar の一部としても使用しています。設定したい色はスタイラス変数で、通常の VueJS 標準に従ってインラインまたはスタイル タグで設定できます。

以下は、色の付いていないアイコンを含むリストの例です。