我有一个简单的webpack模板vue应用程序,假设我有一个页面
http://localhost:8080/profile
在我的本地页面上,我可以从任何页面转到/profile,甚至在/profile上我可以刷新/重新加载页面,并且没有错误。
但是我在heroku上部署了我的应用程序,即使我可以从任何页面导航到任何其他页面,但如果我在/profile页面上,我点击刷新,我会得到
Cannot GET /statement
可能的问题是什么?
发布于 2018-01-16 22:26:21
您正在尝试使用没有后端的路由器的历史模式。为了让事情正常工作,你可以使用Express JS。前面的答案对我不起作用,我编写了自己的服务器脚本。这是在历史模式下运行Vue应用的my server.js。server.js (带Express):
const express = require('express');
const path = require('path');
const history = require('connect-history-api-fallback');
const app = express();
const staticFileMiddleware = express.static(path.join(__dirname + '/dist'));
app.use(staticFileMiddleware);
app.use(history({
disableDotRule: true,
verbose: true
}));
app.use(staticFileMiddleware);
app.get('/', function (req, res) {
res.render(path.join(__dirname + '/dist/index.html'));
});
var server = app.listen(process.env.PORT || 8080, function () {
var port = server.address().port;
console.log("App now running on port", port);
});
将此文件放在项目的根目录中(而不是src)。
使用Node:node server.js
运行此脚本
不要忘记为生产环境构建您的应用程序;)!
发布于 2018-01-16 18:38:17
我认为您的vue路由器处于HTML5历史模式。https://router.vuejs.org/en/essentials/history-mode.html
在开发模式下,webpack-dev-server
为您处理重定向,但您需要配置生产中使用的服务器来重定向您的路由。
https://stackoverflow.com/questions/48277747
复制相似问题