Vue.js多頁面項目中路由使用history模式的方法

采用vue分頁后，因為指向的是單個html文件，無法配置history模式的路由。通過搜索發現了historyApiFallback配置項，下面先寫一下注意事項。

1. router.js 和 this.$router.push 需要加上前綴如：path: '/index/hello-world',  

2. vue.config.js 配置publicPath: '/' (壞處是打包后的html直接打開白屏)

3.項目上線仍需要后台nigx重定向路由

配置：const path = require('path')function resolve ( return path.join(__dirname, d}

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')); }，
　　configureWebpack: { 

　　　　devServer: {

　　　　　　historyApiFallback: { 

　　　　　　verbose: true, 

　　　　　　rewrites: [ 
　　　　　　　　{ from: /^\/index\/.*$/, to: '/index.html'},
 　　　　　 　　{from: /^\/print\/.*$/, to: '/print.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
  }
]