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~