为Vue.js分发项目配置nginx

我使用nginx for Vue.js dist服务器

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

    }
    ...

我可以在浏览器success中访问

qy.abc.xyz

，但我可以告诉你，在我的Vue.js中有很多路由，如果我访问

qy.abc.xyz/index

或

qy.abc.xyz/xxx/xxx

，Nginx将得到

404未找到

错误

您知道

dist

目录由许多

hash 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;
}

我需要配置

你可以试试这个

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

location~*\（gif|jpg|jpeg|png|css|js|ico）${
根
}
地点/{
返回200/index.html
#或者使用重写
重写^.*$/index.html
}

---

或者使用一些具有路由的服务器代码，如

节点

，

asp.net核心

，发送您的html

请遵循我在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;
    }

}

---

您是否重新启动nginx以重新加载配置？我已使用

nginx-s重新加载