Question

我将nginx用于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;

    }
    ...

我可以在浏览器中成功访问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 Rewrite

你可以试试这个

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

}

为Vue.js配置nginx分发项目

2 个答案: