vue 앱 새로 고침: GET /path를 가져올 수 없음

vue 앱 새로 고침: GET /path를 가져올 수 없음

간단한 웹 팩 템플릿 vue 앱이 있는데, 예를 들어 다음과 같은 페이지가 있다고 합시다.

http://localhost:8080/profile

로컬 페이지에서는 임의의 페이지에서 /profile로 이동할 수 있으며 /profile에서 한 번이라도 페이지를 새로 고치고 새로고침할 수 있어 오류가 발생하지 않습니다.

하지만 앱을 heroku에 도입하여 임의의 페이지에서 다른 페이지로 이동할 수 있지만, 예를 들어 /profile 페이지에서 refresh를 누르면 얻을 수 있습니다.

Cannot GET /statement

무엇이 문제일까요?

백엔드 없이 라우터의 이력 모드를 사용하려고 합니다.작업을 수행하려면 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 server.js

프로덕션용 앱을 만드는 것을 잊지 마세요!

vue-router가 HTML5 이력 모드인 것 같습니다.https://router.vuejs.org/en/essentials/history-mode.html

개발 모드에서는webpack-dev-server는 의 리다이렉트를 처리하지만 루트를 리다이렉트하기 위해 실제 가동에서 사용되는 서버를 설정해야 합니다.

언급URL : https://stackoverflow.com/questions/48277747/refresing-a-vue-app-gives-cannot-get-path