vue-router history mode server-side configuration process record

history route

History mode refers to the mode of implementing client-side routing using HTML5's history API. Its typical performance is to remove the # in the URL path in hash mode. It is very easy to enable history mode when using Vue-Router. You only need to pass in the mode:'history' configuration item when instantiating the route. However, when there is no server support, the route based on the historyAPI cannot directly access the specified page from the URL address bar. This is easy to understand, because entering the URL address bar and pressing Enter is equivalent to sending a GET request, then the route path without # is the same as the ordinary API interface. Since the server does not define such an interface, it is normal to see a 404 page when accessing directly.

Official examples

The official website provides many ways to handle this scenario. Take the node.js version as an example:

const http = require('http')
const fs = require('fs')
const httpPort = 80

http.createServer((req, res) => {
  fs.readFile('index.htm', 'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.htm" file.')
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})

It is not difficult to see that its processing idea is to force all requests to be redirected to the home page, which is equivalent to the server blocking the situation where the access resource does not exist, and leaving the routing work to the client to handle. In this way, the front-end routing with history mode enabled will not report an error when directly locating the sub-page.

vue-router history mode configuration

The history mode of vue-router requires setting the mode in the routing configuration to history, and corresponding configuration is also required on the server side.

Compared with hash mode, in history mode, the URL of the page will have fewer symbols such as #:

hash: www.example.com/#/login

history: www.example.com/login

In a single-page application, in history mode, the browser will request this page from the server, but the server does not have this page and returns 404. So at this time you need to configure the server: in addition to static resources, you need to return the index.html of the single-page application.

Server configuration - nodejs

In the nodejs server, you need to introduce the connect-history-api-fallback module to handle the history mode, and use this module before using the middleware for processing static resources:

const path = require('path')
// Import the module that handles history mode const history = require('connect-history-api-fallback')
const express = require('express')

const app = express()

// Register the middleware for handling history mode app.use(history())
// Middleware for processing static resources app.use(express.static(path.join(__dirname, './web')))

app.listen(3000, () => {
    console.log('service started at port 3000')
})

Server Configuration - nginx

First put the packaged files into the html folder, then open the nginx.conf file in the conf folder and modify the following configuration:

http {
    # ...other config
    server {
        # ...other config
        location / {
            root html;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
    }
}

Summarize

This is the end of this article about the server-side configuration of vue-router history mode. For more relevant vue-router history mode configuration content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!