刷新vue应用程序给出：无法获取/路径 [英] Refresing a vue app gives: Cannot GET /path

问题描述

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

I have a simple webpack template vue app, and let's say I have a page with

http://localhost:8080/profile

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

On my local page, I can go from any page to /profile and even once on /profile I can refresh/reload the page and I get no error.

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

But I deployed my app on heroku and even though I can navigate from any page to any other, but if I am for example on /profile page and I hit refresh i get

Cannot GET /statement

可能是什么问题？

推荐答案

您尝试使用没有后端的路由器的历史模式。
为了让事情有效，你可以使用Express JS。以前的答案对我不起作用，我编写自己的服务器脚本。
这是我的server.js用于运行具有历史模式的Vue应用程序。
server.js（带Express）：

You trying to use history mode of router without backend. For getting things working, you may use Express JS. Previous answer is not working for me and i write my own server script. Here is the my server.js for running Vue app with history mode. server.js (with 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）中。

Place this file in the root directory of your project (not src).

运行此脚本使用节点：节点server.js

Run this script with Node: node server.js

不要忘记为生产构建你的应用程序;）！

Don't forget build your app for production ;)!

这篇关于刷新vue应用程序给出：无法获取/路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！