vue多頁面項目中路由如何使用history模式

前言

---

以前寫了一個vue項目中須要添加一個打印的頁面，須要使用多頁面的模式進行開發，vue-cli3出初始化的項目配置多頁面仍是很容易的，可是發現print.html沒有辦法配置history模式的路由，一旦使用history模式的路由。寫了一個簡單的demo在網上尋求幫助沒有能解決問題，後來沒有辦法只能使用hash模式完整項目了。

如何解決

---

有一天看webpack文檔的時候，忽然看到了historyApiFallback配置項，一瞬間感受找到方法了。下班後回家就下載下以前的項目折騰了。
以前的vue.config.js中的配置是這樣的，

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
    pages: {
        index: {
            entry: 'src/main.js',
            template: 'public/index.html',
            filename: 'index.html',
            title: 'Index Page',
        },
        print: {
            entry: 'src/print/main.js',
            template: 'public/print.html',
            filename: 'print.html',
            title: 'print Page',
        }
    },
    chainWebpack: config => {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('assets',resolve('src/assets'))
            .set('components',resolve('src/components'));
    }
}

而後根據 webpack文檔，添加了以下代碼：

configureWebpack: {
        devServer: {
            historyApiFallback: {
                verbose: true,
                rewrites: [
                    { from: /^\/index\/.*$/, to: '/index.html'},
                    {from: /^\/print\/.*$/, to: '/print.html'}
                ]
            }
        }
    }

接下來啓動項目去瀏覽器中驗證，發現訪問localhost:8080/print/hello 和localhost:8080/index/hello-world可以分別訪問到print.html和index.html頁面。可是不能進入對應的路因爲是修改各自的路由文件，修改完後的路由分別爲：

// print
import HelloWold from '../components/HelloWorld'
import goBack from '../components/GoBack'
export default [
    
    {
        path: '/print/hello',
        name: 'print',
        component: HelloWold
    },
    {
        path: '/print/go-back',
        name: 'print',
        component: goBack
    }
]

// index
import HelloWold from '../components/HelloWorld.vue'
export default [
    {
        path: '/index/hello-world',
        name: 'hello-world',
        component: HelloWold
    }
]

在瀏覽器中訪問，能夠了～～～
項目地址 github