目的

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
});