VueJs 2：使用历史模式和路由参数时无法呈现视图

Question

我正在尝试使用历史模式设置 SPA 路由，如下所示：

{
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/articles',
      component: ArticleList,
      children: [
        {
          path: ':title',
          component: ArticleView
        }
      ]
    }
  ]
}

因为我在 vue 和 express 应用程序上使用历史模式路由，所以我将 "express-history-api-fallback" 设置为管道中的最后一个中间件：

const app = express();
const root = path.join(__dirname, '../client/dist');
app.use(express.static(root));
/* other middlewares */
app.use(fallback('index.html', {root: root}));

在页面重新加载的那一刻，一切正常。 IE。加载 url http://application/articles，正确打开视图，BUT 当我尝试访问接受参数的视图时，无论如何，视图不会加载并向快递发出两个请求。

即请求 http://application/articles/test will resolve into two requests. One to http://application/articles/test and another one to http://application/articles/app.[calculated-hash].js 据我了解，第一个请求获取 index.html 另一个请求获取捆绑的 js 脚本。

此外，在 Express 应用程序上，所有通往 api 的路线都以 'api' 前缀开头。

问题: 我的 setup/code 使用历史模式和路由参数有什么问题，因为在手动输入 url 或点击刷新时尝试访问它们时没有加载带有参数的路由？

更新：使用 connect-history-api-fallback 产生相同的结果

Answer 1

问题出在 webpack 注入到 index.html

的脚本标签上

<script type="text/javascript" src="app.06503cbc260646a996d9.js"></script>

src 属性值缺少“/”前缀，因此文件解析失败。

所以为了让它工作，我已经链接了 src 文件，如下所示：

<script type="text/javascript" src="/app.06503cbc260646a996d9.js"></script>

因为我使用 webpack 来打包 js 文件，所以我在 webpack 配置中添加了 output.publicPath '/'

更多信息：connect-history-api-fallback bugtracker

VueJs 2：使用历史模式和路由参数时无法呈现视图

VueJs 2: Unable to render view when using history mode and route params

express

vue-router

vuejs2