我已将 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
,路由会正常工作。但是,如果直接访问子路径,或者刷新页面,我会得到一个未找到的错误。
如何更改我的配置?
最佳答案
我遇到了同样的问题。
当订单为:
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文件。
关于node.js - 具有 Express 和 nginx 反向代理的 Vue Router 历史记录模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41545770/