Config nginx for Vue.js distribute project

Question

I use the nginx for Vue.js dist server.

我的 Nginx 配置是下面：

server {
listen       80;
server_name  qy.abc.xyz;
charset utf-8;
access_log  /var/log/nginx/qy.abc.xyz.access.log  main;
location / {
access_log /data/nginx_log/access.log main;
error_log  /data/nginx_log/error.log error;
root /data/ldl/repo/vue_user_site/dist;
index  index.html;
try_files $uri $uri/ /index.html;
}
...

我可以在浏览器成功中访问qy.abc.xyz，但我可以在我的 Vue 中知道.js有很多路由，如果我访问qy.abc.xyz/index或qy.abc.xyz/xxx/xxx，Nginx 将收到404 Not Found错误。

您知道dist目录由许多hashed-name.js和一个index.html组成。

如何为我的项目配置我的 Nginx？

---

编辑-1

我尝试使用此配置，但不起作用。

location / {
access_log /data/nginx_log/access.log main;
error_log  /data/nginx_log/error.log error; 
#root /data/ldl/repo/vue_user_site/dist;
#index  index.html;
#try_files $uri $uri/ /index.html;
return 200 /index.html;
}

Answer 1

我需要配置 URL 重写

你可以试试这个

location ~* .(gif|jpg|jpeg|png|css|js|ico)$ {
root <your static file root>
}
location / {
return 200 /index.html
# or use rewrite
rewrite ^.*$ /index.html
}

或者使用一些具有路由的服务器代码，如node，asp.net core发送您的html

Answer 2

按照我在 Nginx 中单页应用程序配置的设置：

server {
listen 80;
server_name qy.abc.xyz;
#access_log /var/log/logs/qy.abc.xyz.access.log  main; 
charset utf-8;
index index.html;
root /data/ldl/repo/vue_user_site/dist;

location / {
try_files $uri $uri/ @rewrites;
}
location @rewrites {
rewrite ^(.+)$ /index.html last;
}
location = /50x.html {
root   /usr/share/nginx/html;
}
}