Home > Article > Web Front-end > 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. When accessing, just enter http://yoursite.com. The configuration in nginx is as follows
location / {
try_files $uri $uri/ /index.html;
}
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
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!