Vue和Node配置Nginx

Question

我已经托管了我的第一个Vue和Node应用程序，但是有问题。 我想在不同的端口上加载Vue文件，以便减轻节点压力。 问题是在当前配置下，我在浏览器中得到了此信息： Cannot GET /即使在Node路由器中添加带有url的路由/我也得到了一些东西。 但是我需要从Vue路由器而不是从Express路由器加载此url。 为什么要从快递加载？ 这是我的配置文件nginx：

server {
    listen 80;
    listen [::]:80 default_server;

    return 301 https://$host$request_uri;
}
server {
    # Enable HTTP/2
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    server_name domain.com;

    # Use the Letā€™s Encrypt certificates
    ssl_certificate /etc/letsencrypt/live/domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/domain.com/privkey.pem;

    # Include the SSL configuration from cipherli.st
    include snippets/ssl-params.conf;

    location /api {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://localhost:5000;
        proxy_ssl_session_reuse off;
        proxy_set_header Host $http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
    }
    location / {
        root /var/www/html/Web/dist; // Vue dist folder
    }
}

Answer 1

在您的nginx配置中，您需要添加try_files $uri $uri/ /index.html; 到你/位置。 这会将所有内容发送到您的index.html文件。

location / {
        root /var/www/html/Web/dist; // Vue dist folder
        try_files $uri $uri/ /index.html;
}