首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >刷新vue应用程序提供:无法获取/path

刷新vue应用程序提供:无法获取/path
EN

Stack Overflow用户
提问于 2018-01-16 17:18:38
回答 2查看 5.4K关注 0票数 8

我有一个简单的webpack模板vue应用程序,假设我有一个页面

代码语言:javascript
运行
复制
http://localhost:8080/profile

在我的本地页面上,我可以从任何页面转到/profile,甚至在/profile上我可以刷新/重新加载页面,并且没有错误。

但是我在heroku上部署了我的应用程序,即使我可以从任何页面导航到任何其他页面,但如果我在/profile页面上,我点击刷新,我会得到

代码语言:javascript
运行
复制
Cannot GET /statement

可能的问题是什么?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-01-16 22:26:21

您正在尝试使用没有后端的路由器的历史模式。为了让事情正常工作,你可以使用Express JS。前面的答案对我不起作用,我编写了自己的服务器脚本。这是在历史模式下运行Vue应用的my server.js。server.js (带Express):

代码语言:javascript
运行
复制
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运行此脚本

不要忘记为生产环境构建您的应用程序;)!

票数 18
EN

Stack Overflow用户

发布于 2018-01-16 18:38:17

我认为您的vue路由器处于HTML5历史模式。https://router.vuejs.org/en/essentials/history-mode.html

在开发模式下,webpack-dev-server为您处理重定向,但您需要配置生产中使用的服务器来重定向您的路由。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/48277747

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档