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, я получу ошибку "Не удается получить /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 вместо этого, что позволяет настроить маршрутизатор и впоследствии выполнить подчиненный маршрут.