はじめに

Vue で Ivorzk/vue-cli-plugin-app-config を使って、動作環境ごとのコンフィグを設定する方法。

(ユースケースとしては、リリースビルドで動かしたいけど一部設定は開発向けにしたい、など？)

TL;DR

  • npm i vue-cli-plugin-app-config でインストール
  • app.config.js を作成し、vue.config.js で pluginOptions に追加
  • npm run serve --dev, npm run build --prod などで環境(コンフィグ)切り替え可能
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. セットアップ
    2. 使い方
    3. 注意点
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.6
BuildVersion:	19G2021

$ node -v
v12.7.0

$ npm -v
6.14.5

$ npm ls vue vue-cli-plugin-app-config
├── vue@2.6.11
└── vue-cli-plugin-app-config@1.0.9

詳細

セットアップ

参考: Quick to use

npm i でインストール

1
$ npm i vue-cli-plugin-app-config

使い方

参考: app.config.js Sample configuration file structure

コンフィグファイル(app.config.js)を作成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
module.exports = {
  // 環境ごとの設定
  env: {
    // dev 環境のみ有効になる設定
    dev: {
      env: 'dev',
    },
    // prod 環境のみ有効になる設定
    prod: {
      env: 'prod',
    },
    // test 環境のみ有効になる設定
    test: {
      env: 'test',
    },
  },
  // 共通の設定
  common: {
    server: 'https://foo.example.com',
  },
};

vue.config.js に設定を追加

1
2
3
4
5
6
7
8
9
10
module.exports = {
  // ...
  pluginOptions: {
    // ...
    'app-config': {
      file: './app.config.js',
      default: 'dev',
    },
  },
};

コンフィグを利用したい箇所で data に設定、[this.]config.xxxx で設定値にアクセス可能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div>
    <p>{{ config.server }}</p>
    <p>{{ config.env }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: $config,
    };
  },
  mounted() {
    console.log(this.config);
    // => { "env": "dev", "server": "https://foo.example.com" }
  },
};
</script>

環境の使い分けは --dev や --prod で実施。

1
2
3
4
5
6
7
$ npm run build --dev
$ npm run build --prod
$ npm run build --test

$ npm run serve --dev
$ npm run serve --prod
$ npm run serve --test

注意点

Object も使えるが、env と common に同一 Key で作成してもマージされない。

app.config.js で以下のようにすると、

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  env: {
    dev: {
      foo: {
        bar: 'baz',
      },
    },
  },
  common: {
    foo: {
      hoge: 'fuga',
    },
  },
};

実際のコンフィグは以下のようになる。(自分の環境では env 側が優先されているが、動作環境によっては逆になるかも)

1
2
console.log($config);
// => { foo: { bar: "baz" } }

まとめ

  • npm i vue-cli-plugin-app-config でインストール
  • app.config.js を作成し、vue.config.js で pluginOptions に追加
  • npm run serve --dev, npm run build --prod などで環境(コンフィグ)切り替え可能

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list