用于Vue.js分发项目的配置nginx

Question

我在Vue.js dist服务器上使用nginx。

我的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;
    }

}