# webpack-dev-serve 使用 vue-router

# 问题

当使用 hash 模式时,可以正常的使用,但是当 mode: 'history' 时,却不生效。排除配置问题后,考虑 webpack 的配置问题的可能性。假设 webpack-dev-serve 也是基于 Express 类似的框架,那么 webpack-dev-serve 也会拥有自己的路由,需要有一定的配置才可以使用。

# 解决方案

增加开发模式的配置

module.exports = {
    entry: '',
    output: {
    },
    devServer: {
        historyApiFallback: true
    }
}

# router

import Vue from 'vue';
import Router from 'vue-router';

// 
Vue.use(Router);

import Login from '../view/Account/Login';
import Register from '../view/Account/Register';

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            redirect: {
                name: 'Login'
            }
        }, 
        {
            path: '/account/login',
            name: 'Login',
            component: Login
        },
        {
            path: '/account/register',
            name: 'Register',
            component: Register
        }
    ]
})

这个只是最简单的实例而已