在进行webpack搭建单页面应用时，使用到vue-router，路由访问报错404。

首先，main.js中已经导入vue-router包，并且进行vue.use手动安装。

// 导入vue-router包import VueRouter from 'vue-router';// 手动安装VueRouterVue.use(VueRouter);复制代码

路由配置如下：

import Vue from 'vue';import Router from 'vue-router';import customerRoutes from './customer/index';Vue.use(Router);const routes = [        {                path: '/index',                name: 'index',              component: () => import('@/views/Index.vue')       },      ...customerRoutes,];export default new Router({        mode: 'history',        routes: routes});复制代码

访问， 成功。这里是hash的写法，我们想要去掉#，优化路由，需要将路由模式改为history。

mode: 'history',复制代码

访问出现404，找不到指定页面。出现的原因是，我们设置了mode为history时，当前端发送路径给服务端时，服务端根本就不认识省去#的url，所以返回给我们404。说明是webpack在进行打包时，index.html指定出现了问题，参见。我们可以在webpack配置文件中设置 historyApiFallback 来指定模板路径，方法如下：

devServer: {        contentBase: path.resolve(__dirname + '../dist'),        host: '127.0.0.1',        port: '9090',       hot: true,        inline: true,        historyApiFallback: {                index: '/index.html'//index.html为当前目录创建的template.html        }        // open: true,}复制代码

前方的坑很多，我们一起努力。

感兴趣的同学，可以看下我的哦~