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上重新加载时，会收到错误消息“无法获取/ 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/'
}

Answer 1

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

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

这会将webpack-dev-server配置为在找不到路由（index.html）时回退到404。

Vue应用程序和路由器是从主页（index.html）初始化的，因此在子路由上刷新页面通常会导致404，因为尚未设置路由器。但是，上述后备配置将导致index.html被投放，从而允许设置路由器并随后完成子路由。

VueJS + Webpack Dev Server无法热重载URL子路径

1 个答案: