Vue routing is nginx configuration in history mode

Scenes

In the vue project, routing uses history mode. When accessing the project, it can be accessed normally, but when we refresh the page or directly access the path, 404 will be returned.

Cause Analysis

In history mode, the interface changes are driven by listening to the popstate event, and a link click event is listened to. The history.pushState and history.replaceState methods are used to change the URL to update part of the page content without initiating an http request. But when the page is refreshed directly or the path is directly accessed, an http request will be initiated to the server, but the target does not exist on the server, so 404 will be returned.

solution

Official configuration instructions

nginx configuration is as follows:

    server {
        listen 8082;
        location / {
          root /opt/dist/vue-history;
          index index.html index.html;
          try_files $uri $uri/ /index.html;
        }
    }

expand

After deployment, when accessing some pages, the error Uncaught SyntaxError: Unexpected token '<' is reported.

solution:

At first, publicPath was './' and needs to be changed to '/', that is, vue.config.jsmodify the configuration in

module.exports = {
    
    
  ...
  publicPath: '/',
}

Summarize

The above are some problems encountered when deploying routing in Vue using history mode. I hope this article will be helpful to you!