使用方法.クエーサーのENVファイル

多くの開発者は特に初心者の適切な使用に問題がある.クエーサーアプリケーション開発中のENVファイルとビルドアップ.
クエーサーの最近のドキュメント( Ver . 1.13用)には、アプリケーションの環境変数を使用するための3つのメソッドがあります.

CLIインライン変数など.QENV=development quasar dev

@ quasar/dotenv拡張モジュール
https://www.npmjs.com/package/@quasar/quasar-app-extension-dotenv

@ quasar/qenv拡張モジュール
https://www.npmjs.com/package/@quasar/quasar-app-extension-qenv

残念ながら公式文書の記述にもかかわらず
https://quasar.dev/quasar-cli/handling-process-env
https://quasar.dev/quasar-cli/quasar-conf-js#Example-setting-env-for-dev%2Fbuild
開発者は多くの場合、彼らが使用しようとすると混乱している.ENVファイルは、クエーサーのダクト内の重要な情報を欠落するためです.この記事では、環境変数の使用方法を明確にしたいと思います.

つの基本ユースケース
操作の範囲が異なるので、2つのグループで記述されたメソッドを分割できます.
クエーサーで適用可能な

.conf . js (主な設定ファイル):

CLIインライン変数

@クエーサー/ドtenフ拡張子

アプリケーションにのみ適用可能な

＠クエーサー/Qenv拡張

ここで最も重要な結論は
クエーサーの設定に@ quasar/qenv拡張子を使用できません.京大理

クエーサー/dotenv拡張子を使う方法
非常に良い記述は記事にあります
https://medium.com/carbono/using-env-file-in-quasar-apps-72b56909302f
まず、Quasarアプリ拡張モジュールdotenvをインストールします.
https://www.npmjs.com/package/@quasar/quasar-app-extension-dotenvquasar ext add @quasar/dotenvその後、新しいjsファイルenvparserを作成します./src/configにあるJS :

const DotEnv = require('dotenv')
const parsedEnv = DotEnv.config().parsed
module.exports = function () {
  // Let's stringify our variables
  for (key in parsedEnv) {
    if (typeof parsedEnv[key] === 'string') {
      parsedEnv[key] = JSON.stringify(parsedEnv[key])
    }
  }
  return parsedEnv
}

クエーサーで.conf . jsは、次のコードに従ってファイルの最上位に含まれます.const envparser = require('./src/config/envparser.js')この関数を( new ) env変数にクエーサー属性のクエーサーに割り当てます.京大理

build: {
  env: envparser(),
  vueRouterMode: 'history',
...}

ファイルを作成します.プロジェクトのディレクトリにenv.任意の数のカスタムenv変数を含めることができます.JOT_PUBLIC_PATH=http://dev.com/flexbox/dist/spaクエーサーで変数を使用します.設定.js

build: {
     env: envparser(),
     vueRouterMode: 'history',
     publicPath: ctx.prod ? process.env.JOT_PUBLIC_PATH : '',
...}

オブジェクトプロセス.ENVは、すべてのサーバー/コンピュータ環境変数とすべてのカスタム環境変数から利用できます.envファイル.

クエーサー/Qenv拡張を使う方法
クエーサー拡張機能のインストールquasar ext add @quasar/qenvファイル.クエーサー環境変数JSONは、テンプレートのインストール中に作成されます

{
  "development": {
    "ENV_TYPE": "Running Development",
    "ENV_DEV": "Development"
  },
  "production": {
    "ENV_TYPE": "Running Production",
    "ENV_PROD": "Production"
  },
  "test": {
    "ENV_TYPE": "Running Test",
    "ENV_Test": "Test"
  }
}

変数から.クエーサー環境変数JSONは、アプリケーションのビルド後にのみ使用できます.これらのカスタム変数は、他の組み込み変数と一緒にアプリケーションのブートファイル、アプリケーション、およびコンポーネントファイルで使用できます.
オブジェクトプロセス.envは利用可能な変数のみです.クエーサー環境変数JSONとQuasar組み込み環境変数
上記のテンプレートを使用してプロセスを定義します.envオブジェクトの内容

{
      "ENV_TYPE": "Running Development",
      "ENV_DEV": "Development",
      "NODE_ENV": "development",
      "CLIENT": true,
      "SERVER": false,
      "DEV": true,
      "PROD": false,
      "MODE": "spa",
      "VUE_ROUTER_MODE": "hash",
      "VUE_ROUTER_BASE": "",
      "APP_URL": "http://localhost:8080"
}

ビルド処理の後、サーバー/コンピュータ環境変数は、新しくつくられたプロセスで利用できません.envオブジェクト.
ブートファイルの例

export default async (app /* { app, router, Vue ... } */) => {
 console.log('show router mode:', process.env.VUE_ROUTER_MODE);
 // something to do
}

例での使用.vueファイル:

<script>
  console.log('inside', process.env.VUE_ROUTER_MODE);
  export default {
    name: 'App',
  }
</script>