vue每个路由单独html,vue多入口项目的构建（包括各系统路由之间如何跳转）

由于上篇博客的vue多项目入口配置最终用起来效果不是很好，所以接下我修改了项目的目录结构，并且修改了相关路由配置

关于目录结构的配置，具体参照博客：https://www.cnblogs.com/jasonwang2y60/p/9247283.html

src下面的目录调整为如下：

其中：entry文件下放系统的多入口页面，这里我分为了登录端、管理端和业务端。

router文件夹下放相应的入口页面对应的路由文件

views文件夹下放相应系统的具体页面实现。如 Login,vue对应文件夹 login的内容。

修改build文件夹下面的配置文件，主要内容和上篇博客一样，不过需要修改相应的路径(以为我这里的目录结构和上篇博客中不同了)

那么又回到最初的问题：如何实现这三个系统直接的页面跳转呢？例如，我这里的需求是要能通过 登录端进入管理端或者业务端。

首先，尝试单页面vue的router方法，

this.$router.push({path:path});

这里“path”设为："/admin.html#/",结果失败。因为push方法实际上只是在url后面添加字段，所以在这种情况下url就变成了：http://localhost:8080/login.html#/admin.html#/，这样是访问不到页面的。

于是，我在网络上重新查找了一下，在这里找到了解决方案：https://segmentfault.com/q/1010000017866630

由于VUE本来就是单页应用，如果要多应用之间跳转 可以用原始方法跳转：window.location.href = '/admin.html#/具体页面的path'，

window.location.href = path;

跳转到管理端的路径为：

能成功显示页面！至此，整个项目能成功运行和跳转。

但是，目前还有一个问题就是页面的url显示太长太丑了。。这是Vue路由的默认显示模式“hash”模式，还有一种是我们比较习惯的，看起来比较好看的“history”模式，其url中不会存在“#”这种符号，于是我又想将项目的路由模式改为“histroy”模式。

故，信心满满，将router文件夹下面的文件做如下修改：

mode:'history',

routes: [

{

path: '/epi/admin/department',

name: 'department',

component: department

},

其重点就是添加这个： mode:'histroy'

在webpack.dev.conf.js文件下做如下修改：(其大意就是根据url里的内容重定向到不同的页面...)

historyApiFallback: {

rewrites: [

{from: /^\/user/, to: path.posix.join(config.dev.assetsPublicPath, 'user.html')},

{from: /^\/admin/, to: path.posix.join(config.dev.assetsPublicPath, 'admin.html')},

{from: /^\/login/, to: path.posix.join(config.dev.assetsPublicPath, 'login.html') },

// {from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'login.html') },

],

},

重新编译后运行，可以通过：localhost:8080/login、localhost:8080/admin、localhost:8080/user来访问三个系统的入口，

正当我信心满满，以为成功的时候，通过页面上的：

部门管理

员工管理

去访问 部门管理 页面时，页面跳转成功，url变为：localhost:8080/epi/admin/department，

然后刷新，出错！！！页面报错：找不到 /epi/admin/department，

其他子页面情况也如此，故我将配置又改回"hash"模式。

至于“history”模式，等之后有时间再去研究吧~O(∩_∩)O~