[英]Vue Router history mode with Express and nginx reverse proxy
我已将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
则路由工作正常。 但是,如果直接访问子路由或刷新页面,则会收到未找到的错误。
如何更改我的配置?
由于无法使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
。
我有同样的问题。
当订单为:
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文件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.