2019/11/28 Vue

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

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

VueRouter

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

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

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

app.js
1 2 3 4 5 6 7 8 9	`const router =` `new` `VueRouter({` `mode:` `'history',` `relative:` `true,` `routes: [` `...` `..` `.` `]` `});`

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

*.html
1	`<base` `href="https://localhost/example/">`

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