VueJS + Webpack Dev Server 无法实现对 URL 子路径的热重载

Question

我的应用程序在子目录http://localhost:8080/admin_suffix上运行。 suffix是一个环境变量，我可以在.env文件中更改和定义。

一旦我运行webpack开发服务器，访问http://localhost:8080/admin_suffix就可以了。

单击SPA中指向其他子路径的超链接也可以正常工作。例如，我可以导航到http://localhost:8080/admin_suffix/subdirectory 但是，当我在http://localhost:8080/admin_suffix/subdirectory上点击刷新时，会出现错误“Cannot GET /admin_suffix/subdirectory”。

我也无法直接在浏览器中输入子路径来加载页面，只有``http://localhost:8080/admin_suffix`可以正常工作。

我的配置如下：

webpack.base.config.js：

  entry: {
    main: './src/main',
    vendors: './src/vendors'
  },
  devServer: {
        host: '0.0.0.0',
        disableHostCheck: true
  },
  output: {
    path: path.join(__dirname, '../dist')
  }

webpack.dev.config.js:

module.exports = merge(webpackBaseConfig, {
  output: {
    publicPath: '/',
    filename: '[name].js',
    chunkFilename: '[name].chunk.js'
  }
});

src/main.js:

const RouterConfig = {
    mode: 'history',
    routes: Routers,
    base: '/admin_suffix/'
}

- Calvintwr

---

你正在使用Vue的“history”模式。你是否完全按照他们的文档中的所有步骤进行操作？请参见此处：https://router.vuejs.org/guide/essentials/history-mode.html - Ferry Kranenburg

Answer 1

在webpack.base.config.js中启用devServer.historyApiFallback：

devServer: {
  historyApiFallback: true,
  // ...
},

这将配置webpack-dev-server，在未找到路由（404）时返回index.html。Vue应用程序和路由器从主页（index.html）初始化，因此在子路径上刷新页面通常会导致404错误，因为路由器尚未设置。但是，上述回退配置将导致提供index.html，允许设置路由器并随后完成子路径。

- tony19