【Vue】VueRouterで動的にBaseのURLを変更する方法

VueRouterのBaseのURLを動的変更するメモ

VueRouter

Vueの設置場所をサブディレクトリにした際にAPIリファレンス | Vue Routerのbaseの設定を変更すれば変更は可能ですが、設置するサーバー毎にPathを変更したい場合、baseだと設置場所毎に変更する必要があります。

app.js上でVueRouterの設定を変更「relative: true」に設定。

const router = new VueRouter({
  mode: 'history',
  relative: true,
  routes: [
    ...
    ..
    .
  ]
});

画面側のヘッダーに以下のbaseタグを設定。

<base href="https://localhost/example/">

baseタグのhrefを環境毎に変わるようにしておけば簡単にVueRouterを動的に変更することが出来ます。