多入口单页应用使用 history 路由出现问题

Question

问题描述

使用 vue-router 的 history 模式， 单个入口的 spa 应用没有问题，但是配置了一个多入口的页面出现了问题。
项目模版在这里：https://github.com/lwpersonal...

问题出现的环境背景及自己尝试过哪些方法

有 app1/index.html 和 app2/index.html 两个入口，后续可能会添加多个

开始尝试修改 devServer 的配置

devServer: {
    ...
    historyApiFallback: {
      verbose: true,
      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
      rewrites: [
        // 尝试一
        { from: /^\/app2\/index.html/, to: '/app2/index.html' },
        
        // 尝试二
        { from: /app2\/.*/, to: path.posix.join(config.dev.assetsPublicPath, 'app2/index.html') },
        
        // 尝试三
        { from: /.*/, to: '/app2' }
      ]
    },
    ...
  }

然后没有效果

然后自己配置 node 服务器，前端代理到服务器的端口

// 配置
proxyTable: {
  '/': {
    target: 'http://local.dev.smartstudy.com:8080',
    rewrite: function (req) {
      req.url = req.url.replace(/^\/\w+/, '')
    }
  }
},

服务器

// 第一个插件
const history = require('connect-history-api-fallback')

const fn = options => {
  const middleware = history(options)
  const noop = () => {
  }

  return async (ctx, next) => {
    middleware(ctx, null, noop)
    await next()
  }
}

app.use(fn({
    rewrites: [
      { from: /.*/, to: 'app2/index.html' }
    ],
    verbose: true,
    htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']
}))

// 第二个插件
const historyApiFallback = require('koa2-connect-history-api-fallback')
app.use(historyApiFallback({
    rewrites: [
      { from: /.*/, to: '/app2/index.html' }
    ],
    verbose: true,
    htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']
  }))

这种方法，确实捕捉到了页面路由请求

也有重定向的提示，但是却没有改变页面，还是一样的 404 结果
然后我试着，把 to 后面的参数改为绝对地址，https://www.baidu.com 等，也都没有效果

Answer 1

已经解决了，这个配置没有问题，是我在 package.json 中的配置，覆盖了文件中的配置导致的。