Configuration method of vue-router+nginx non-root path

This article mainly introduces the configuration method of vue-router nginx non-root path. It has certain reference value. Now I share it with you. Friends in need can refer to

vue-router’s default Data hash mode - Use the hash of the URL to simulate a complete URL, so when the URL changes, the page will not reload.

Generally, we don’t like ugly hashes. Similar to index.html#/matchResult, you can use the history mode of routing. History mode uses the history.pushState API to implement page jumps.

But there is a problem. When using nginx, we need to add some configurations.

Configure directly under the root path

Configure directly under the root path. When accessing, just enter http://yoursite.com. The configuration in nginx is as follows

location / {
  try_files $uri $uri/ /index.html;
}

Non-root path configuration

If there are multiple projects under a domain name, then it is not appropriate to use the root path configuration. We need to specify a layer of paths under the root path, such as

A Project

http://yoursite.com/A

B project

http://yoursite.com/B

nginx configuration

    location ^~/A {
            alias /XX/A;//此处为A的路径
            index index.html;
            try_files $uri $uri/ /A/index.html;
    }
    location ^~/B {
            alias /XX/B;//此处为B的路径
            index index.html;
            try_files $uri $uri/ /B/index.html;
    }

tip: Be careful to use alias and not root

The above is The entire content of this article is hoped to be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How does vue solve the problem of refresh failure after addRoutes dynamically adds routes

##Vue iview-admin framework How to change the second-level menu to a third-level menu

Configuration|Configuration method of electron vue ts sqlite

The above is the detailed content of Configuration method of vue-router+nginx non-root path. For more information, please follow other related articles on the PHP Chinese website!