具有 Express 和 nginx 反向代理的 Vue Router 历史记录模式

Question

我已将 nginx 配置为将所有请求传递给节点：

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

在服务器上，我有一个 Node 应用程序运行 Express，它为我的 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

由于无法使连接历史记录-api-后备库正常工作，我自己创建了一个：

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

这将在请求时发送 /app/index.html 除了 /dist 脚本和图像所在的任何内容。

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

在 web 文件夹中 我有：
index.html
和其他 js，css 个文件。

具有 Express 和 nginx 反向代理的 Vue Router 历史记录模式

Vue Router history mode with Express and nginx reverse proxy

nginx

node.js

express

vue-router