Мое приложение работает в подкаталоге http: // локальный: 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
, я получаю сообщение об ошибке «Cannot GET / admin_suffix / subdirectory»
Я также не могу ввести подпуть в браузере напрямую, чтобы загрузить страницу. Работает только http: // локальный: 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/'
}
Включите devServer.historyApiFallback
в webpack.base.config.js
:
devServer: {
historyApiFallback: true,
// ...
},
Это настраивает webpack-dev-server
для возврата к index.html
, когда маршрут не найден (404
).
Приложение Vue и маршрутизатор инициализируются с главной страницы (index.html
), поэтому обновление страницы во время подмаршрута обычно приводит к 404
, потому что маршрутизатор еще не был настроен. Однако упомянутая выше резервная конфигурация приведет к тому, что вместо этого будет обслуживаться index.html
, что позволит настроить маршрутизатор и впоследствии завершить подмаршрут.
Вы используете Vue в режиме «истории». Вы полностью выполнили все шаги из их документации? Смотрите здесь: router.vuejs.org/guide/essentials/history-mode.html