vue-cli 4 多页面开发非index页history mode界面加载为空

Question

使用vue-cli4自带的多页面开发模式，有两个spa，分别是index和admin，配置如下

module.exports = {
  ...
  pages: {
    index: {
      entry: 'src/index/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: '世说新语',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    admin: {
      entry: 'src/admin/main.js',
      template: 'public/admin.html',
      filename: 'admin.html',
      title: '管理',
      chunks: ['chunk-vendors', 'chunk-common', 'admin']
    }
  },
  devServer: {
    port: 10086,
    historyApiFallback: {
      rewrites: [
        { from: /^\/$/, to: '/index.html' },
        { from: /^\/admin\//, to: '/admin.html' }
      ],
      disableDotRule: true
    },
    proxy: {
      '/api': {
        target: 'xxx',
        changeOrigin: true
      }
    }
  }
  ...
}

之后分别为两个界面配置对应的项目文件夹


下图为文件结构，index文件夹对应index，admin文件夹对应admin，里面放着对应的route，App.vue，main.js 和 vuex 文件。
我开发时遇到一个问题，就是run serve之后加载index部分正常，但是当我访问 localhost:10086/admin 的时候，admin 的app.vue加载了，但是路由中加载的其他组件并没有加载，导致界面一片空白。奇怪的是我使用admin路由的hash mode 可以正常显示。

history mode 失败，只加载了 app.vue

hash mode 成功

=。=有没有大佬用vue-cli3做过多页打包的可以分享下经验

Answer 1

解决了。
history 路由会匹配完整的路由，而我在route里面设置的路由没有加上admin

// 老的
{
    name: 'dashboard',
    path: '/dashboard',
    component: ....
}
// 改成
{
    name: 'dashboard',
    path: '/admin/dashboard',
    component: ...
}

或者直接在路由里加一个base属性即可

mode: 'history',
base: process.env.NODE_ENV === 'development' ? '/admin' : '/',
...

更具体的可以参考我这个项目