具有Express和Nginx反向代理的Vue路由器歷史記錄模式

Question

我已將nginx配置為將所有請求傳遞給Node：

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

在服務器上，我有一個運行Express的Node應用程序，它在我的Vue索引文件中提供服務器。

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

我想在Vue路由器上使用HTML5歷史記錄模式，因此我在路由器設置中設置了mode: 'history' 。 我安裝了connect-history-api-fallback並進行了設置：

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

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

如何更改我的配置？

Answer 1

由於無法使connect-history-api-fallback庫正常工作，我自己創建了一個庫：

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

當請求除腳本和圖像所在的/dist /app/index.html時，這將發送/app/index.html 。

Answer 2

我有同樣的問題。

當訂單為：

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!')
});

在網絡文件夾中，我有：
的index.html
和其他js，css文件。