web-dev-qa-db-ja.com

Vue js外部設定ファイルを含むJS）

外部構成ファイルを読み取るためにVueアプリをできるようにする可能性があるか疑問に思います。アプリケーションを展開しているものを想像してください。この時点で、アプリケーション全体を再構築しなくても、外部ファイルの設定を変更することを可能にします。その結果を達成できるややどこにありますか？今度は区切りのVUEXストアを使用していますが、アプリ全体を再構築せずに設定を変更することはできません。

私はプロジェクトがVue CLIで行われることを言うのを忘れました。

javascriptvue.jswebpackconfiguration-files
4
Maurizio Ricci

これが私がそれをした方法です：

パブリックフォルダにconfig.jsファイルを作成します。

window.VUE_APP_API_KEY = 'blahblahblah';
 _

その後、public/index.htmlでは、ヘッドセクションに次の行を追加します。

  <script type="text/javascript">
    var cachebuster = Math.round(new Date().getTime() / 1000);
    document.write('<scr' + 'ipt type="text/javascript" src="<%= BASE_URL %>config.js?cb=' + cachebuster + '"></scr' + 'ipt>');
  </script>
 _

それからVUE App]では、Window.vue_app_api_keyを呼び出す必要があります。シンプル、迅速:)

3
rip747

私は、動的に作成されたJSファイルを返し、その設定を保存するグローバルオブジェクトを定義するノードによって提供されます。 Vueに依存しないものはありません。

index.htmlでは：

 <script type="text/javascript" src="config.js"></script>

node（サーバー側）：

  app.get('/config.js', (request, reply) => {
    reply.header('Content-Type', 'application/javascript');
    reply.send(`MyConfig = ${JSON.stringify(config)}`);
  });

コンポーネント（または他の場所）で：

{
  data: () => ({
    someField: MyConfig.someField
  })
}
1
Andy