The paths are correct, and the project route can be accessed locally, but the routing address 404 is added after deployment. In fact, it is a problem with nginx configuration. Zhihu’s previous brother’s solution: Deployment 404 in nginx for projects packaged with vue-cli, and the problem of being unable to jump to routing - Zhihu
The problem is actually that the route is not redirected. A simpler configuration method is try_files $uri $uri/ /index.html; #Directed access path
The following explains in detail the difference between try_files and rewrite
The try_files directive is used to try multiple files or paths when processing requests in Nginx. A common usage scenario is in a single-page application (SPA), where all requests are directed to the home page (eg index.html), which is then handled by the front-end route.
The following is an example configuration using the try_files directive:
nginx
server { listen 8082; server_name localhost; root /path/to/your/static/files; # Specify the root directory of static files
location / { try_files $uri $uri/ /index.html; } } In this configuration:
Use the listen directive to specify the port to listen on.
Use the server_name directive to set the name of the server (localhost in this example).
Use the root directive to specify the root directory of static files. You need to replace /path/to/your/static/files with the actual static file path.
In the location/ block, we use the try_files directive for request processing.
$uri represents the file path of the original request.
$uri/ represents the original requested file path followed by a slash (used to handle directory requests).
/index.html means that if the previous two paths do not exist, the request will be forwarded to the index.html file. In this way, in a single-page application, all requests will be forwarded to index.html and then processed by the front-end route.
Please modify the root directory and other related parameters in the configuration according to your actual situation to suit your project needs.
The rewrite directive is used to rewrite URLs in Nginx. It can modify the URI requested by the client, or redirect the request to another location.
Here are some common usage examples of the rewrite directive:
Rewrite the specified path:
nginx
location /old-path { rewrite ^/old-path/(.*)$ /new-path/$1 break; } This configuration will rewrite all requests starting with /old-path/ to /new-path/, and keep the contents of the original path.
Redirect to new URL:
nginx
location /redirect-me { rewrite ^/redirect-me$ http://example.com/new-location permanent; } This configuration redirects requests for the /redirect-me path to http://example.com/new -location, and use the permanent parameter to indicate permanent redirection.
Using regular expressions for URL rewriting:
nginx
location ~ ^/category/([az]+)$ { rewrite ^/category/([az]+)$ /products?category=$1 last; } This configuration will match paths with /category/ followed by lowercase letters, and Rewrite it as /products?category=, followed by the matching lowercase letters as arguments.
Please note that these are just some basic example uses of the rewrite directive. In actual applications, you may need to use more complex regular expression patterns or combine other instructions to perform rewriting operations based on specific needs. Specific usage depends on your needs and configuration environment.