與Express和nginx的Vue公司路由器的歷史模式，反向代理

我已經配置nginx的所有請求傳遞到節點：與Express和nginx的Vue公司路由器的歷史模式，反向代理

server { 
    listen 80; 
    server_name domain.tld; 

    location/{ 
     proxy_pass http://localhost:3000; 
     proxy_http_version 1.1; 
     proxy_set_header Upgrade $http_upgrade; 
     proxy_set_header Connection 'upgrade'; 
     proxy_set_header Host $host; 
     proxy_cache_bypass $http_upgrade; 
    } 
}

在服務器上我有運行快速哪些服務器我Vue的索引文件節點的應用程序。

app.get('/', (req, res) => { 
    res.sendFile(`${__dirname}/app/index.html`); 
});

我想使用HTML5歷史模式Vue的路由器，所以我設置的路由器設置mode: 'history'。我安裝connect-history-api-fallback，並將其設置：

const history = require('connect-history-api-fallback'); 
app.use(history());

的路由工作正常，如果用戶首先點擊http://domain.tld。但是，如果直接訪問子路由或刷新頁面，則會出現未找到的錯誤。

如何更改我的配置？

來源

2017-01-09 Mikko

使用節點應用程序來提供文件是明智嗎？用它是不是更好？ nginx在資源方面？ – jntme

，因爲我無法獲得連接歷史-API的後備庫的工作，我創建了一個自己：

app.use((req, res, next) => { 
    if (!req.originalUrl.includes('/dist/', 0)) { 
    res.sendFile(`${__dirname}/app/index.html`); 
    } else { 
    next(); 
    } 
});

時要求什麼，但/dist其中腳本和圖像都位於這將發送/app/index.html。

來源

2017-01-09 11:59:50 Mikko

我有同樣的問題。

時的順序是它不會工作：

app.use(express.static('web')); 
app.use(history());

，而是將工作時：

app.use(history()); 
app.use(express.static('web'));

所有示例應用程序：

var express = require('express'); 
var history = require('connect-history-api-fallback'); 
var app = express(); 

app.use(history()); 
app.use(express.static('web')); 

app.listen(3002, function() { 
    console.log('Example app listening on port 3002!') 
});

在Web文件夾我有：
index.html
和其他js，css文件。

來源

2017-02-13 14:53:13 artuu

與Express和nginx的Vue公司路由器的歷史模式，反向代理

回答

相關問題