Почему Vue-router при обновлении страницы выдаёт Cannot GET /about?

Question

[dark_king_13]

На главной странице при обновлении всё нормально, когда перехожу на другую страницу, всё работает, но при обновлении вместо страницы about вылазит ошибка "Cannot GET /about".
Эта ошибка и при работе через webpack-dev-server и через express.

Answer 1

[dark_king_13]

Нашёл решение. На сервере нужно добавить "connect-history-api-fallback"

const express = require('express')
const connectHistory = require('connect-history-api-fallback')
const app = express()

app.use(connectHistory())

Answer 2

[Игорь Стасюк]

можно во-первых код в студию, мы видеть код спрятанный на расстоянии не можем
во-вторых: предположу что где-то вы неправильно настроили или vue-router или express, ибо с коробки все работать должно

Comments

[dark_king_13]

настройки vue-router

import Vue from 'vue'
import Router from 'vue-router'
import HomePage from './views/index'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: HomePage
    },
    {
      path: '/about',
      component: () => import('./views/about.vue')
    }
  ]
})

Настройки самого Vue

//+ Vue.js 
import Vue from 'vue';
import store from './store/index'
import router from './routers/index'
import App from './App.vue'

Vue.config.productionTip = false

//+ Vue init 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Настройки express

const express = require('express')
const path = require('path')
const consola = require('consola')
const bodyParser = require('body-parser')
const app = express()
require('dotenv').config()

const PORT : number = parseInt(process.env.PORT) || 3000
const HOST : string = process.env.HOST || 'localhost'

const PATH_TO_CLIENT : string = path.join(__dirname, '..', '..', './dist')
const PATH_TO_HTML : string = path.join(PATH_TO_CLIENT, 'index.html')

const static = express.static(PATH_TO_CLIENT)
app.use(static)
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))

app.get('/', (req, res) => {
  res.sendFile(PATH_TO_HTML)
})


app.listen(PORT, HOST, () => {
  consola.ready({
    message: `Server is listening to http://${HOST}:${PORT}`,
    badge: true
  })
})

[Игорь Стасюк]

лучше сделать так по мне

import About from './views/about.vue';

....

component: About

[dark_king_13]

Игорь Стасюк, Пробовал, не помогло

[dark_king_13]

Игорь Стасюк, Я посмотрел во vue-cli, там webpack для каждой страницы делает отдельный файл со скриптом, а у меня всё собирается в один файл, может ли проблема быть в этом?