Solve the problem of 404 in Vue's history mode refresh page

Solve the problem of 404 in Vue's history mode refresh page

Two working modes of routing

(1), hash mode

  • There is always a # in the address, which is not beautiful
  • If the address is shared through a third-party mobile app in the future, if the app verification is strict, the address will be marked as illegal
  • better compatibility

(2), history mode

  • The address is clean and beautiful
  • Compatibility is slightly worse than hash mode
  • Back-end personnel support is required when the application is deployed and launched to solve the problem of page server refresh 404


insert image description here
The solution to error 404 is reported as soon as it is refreshed . When the
application is deployed online, it needs the support of back-end personnel to solve the problem of refreshing 404 on the server side of the page.

Usage

npm install --save connect-history-api-fallback

Import the library

var history = require('connect-history-api-fallback');
const express = require('express');
const history = require('connect-history-api-fallback');
const app = express();
app.use(history())
app.use(express.static(__dirname + '/static'))
app.get('/person', (req, res) => {
    
    
    res.send({
    
    
        name: 'zhang',
        age: 20
    })
})
app.listen(5000, (err) => {
    
    
    if (!err) console.log('服务器启动了');
})


Guess you like

Origin blog.csdn.net/m0_46374969/article/details/121520825