フロントエンドの地獄

みせてやりますよ。本当の地獄ってやつをね。

vue-routerで開発時のみ見れるページを追加する

目的

vue-router利用時にユーザーには見られたくないデータの確認用ページなど、開発時のみ表示したいページがある場合の設定方法です。

事前準備

Webpackプラグイン

EnvironmentPlugin

babelプラグイン

babel-plugin-transform-inline-environment-variables - npm

のどちらかを利用すると、ビルド時の環境に合わせて

プログラム内の process.env.NODE_ENV をそれぞれの環境に変更してくれます。

利用例

if (process.env.NODE_ENV === 'development') {
 //開発環境でのみ実行
}

この様に記述するだけで開発時のみ実行するプログラムが追加出来ます。

こちらをvue-routerでのルート定義時に以下の様な形で追加すれば、開発時のみ表示したいページの定義が出来ます。

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router)

import Top from '@/components/Top.vue';
import About from '@/components/About.vue';

//開発時のみ表示したいページ
import Admin from '@/components/Admin.vue';

const routes = [
    {
        name: 'top',
        path: '/',
        component: Top
    }, {
        name: 'about',
        path: '/about',
        component: About
    }
];

//ページ追加
if (process.env.NODE_ENV === 'development') {
    routes.unshift({
        name: 'admin',
        path: '/admin',
        component: Admin
    });
}

export default new Router({
    mode: 'hash',
    routes
});

vue-routerに追加しているルートは配列になっており、現在のルートの一致に関してはその配列の頭から調べていくため、unshiftを利用して配列の頭に追加します。

これなら /* などで404ページを定義していても優先的に追加したページが表示されます。

こちらを利用すればユーザーに見られないようなページを定義して、データの確認等を行うことが出来ます。

以上です。