VueJS + Webpack Dev Server无法热重新加载url子路径

Question

我的应用程序在子目录http:// localhost:8080/admin_suffix上运行

suffix 是一个ENV变量,我可以在.env文件中更改和定义.

一旦我运行webpack开发服务器,访问http://localhost:8080/admin_suffix工作.

单击SPA中指向其他子路径的超链接也可以.例如,我可以导航到http://localhost:8080/admin_suffix/subdirectory

但是,当我点击重新加载时http://localhost:8080/admin_suffix/subdirectory,我将收到错误"无法GET/admin_suffix /子目录"

我也无法直接进入浏览器的子路径来加载页面.只有`` 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/'
}

Answer 1

启用devServer.historyApiFallback于webpack.base.config.js：

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

这配置webpack-dev-server为index.html在未找到路由时回退 ( 404)。

Vue 应用程序和路由器是从主页 ( index.html) 初始化的，因此在子路由上刷新页面通常会导致 ，404因为路由器尚未设置。但是，上述回退配置将导致index.html提供服务，从而允许设置路由器并随后完成子路由。