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

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

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

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

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

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

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

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

修改完成后，就可以成功运行了，三个系统的入口分别为：http://localhost:8080/login.html#/（或者localhost:8080,这是默认的入口）、http://localhost:8080/admin.html#/、http://localhost:8080/user.html#/

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

首先，尝试单页面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来访问三个系统的入口，

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

      <MenuItem name="1">
          <router-link to="/epi/admin/department">
            <Icon type="ios-paper"/>部门管理
          </router-link>
        </MenuItem>
        <MenuItem name="2">
          <router-link to="/epi/admin/staff">
            <Icon type="ios-people"/>员工管理
          </router-link>
        </MenuItem>

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

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

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

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

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

猜你喜欢