404 not found nginx (after dist is packaged, refresh and jump are all 404 not found nginx problems) Solution (packaged and published on the server)

When we execute yarn run build, the dist file is generated

We put the code into the html below nginx-1.24.0

Then we configure nginx.conf under the conf file

 I won’t introduce the configuration. The main problem is that this sentence is not added.

 problem analysis

index index.htm index.html;
index is the root directory, which only recognizes the one ending with "/". If you enter a path that does not exist or refresh the page, nginx will directly report 404 without redirecting to index.html.

try_files is more reliable. It will first search for the file under "$uri". If it does not exist, it will search for $uri/. If it does not exist, it will redirect to the /index.html page. If the final parameters are written incorrectly, a 500 server error will result.

Generally, these two should not be written in the same location

Regarding why the vue project only configures index refresh and gets 404:
vue + nginx configuration, vue routing must first load index.html or XX.js to identify the route.

This is the explanation of each parameter,

# 1.假设请求 127.0.0.1/home
 
# 2.nginx配置的location
location / {
    root   /opt/dist;
    index  index.html;
    try_files $uri $uri/ /index.html;
    }
 
 
# 变量解释
try_files  固定语法
$uri       指代home文件(ip地址后面的路径，假如是127.0.0.1/index/a.png，那就指代index/a.png)
$uri/      指代home文件夹
/index.html  向ip/index.html 地址发起请求
 
 
try_files $uri $uri/ /index.html;
尝试解析下列2个文件/文件夹(自动分辨出，IP后面的路径是文件还是文件夹)， $uri/$uri/，
如果解析到，返回第一个，
如果都没有解析到，向127.0.0.1/index.html发起请求跳转(该路由必须真实，不然会报错)