Github 페이지에 게시된 Vue 웹 사이트를 새로고침할 때 404

Github 페이지에 게시된 Vue 웹 사이트를 새로고침할 때 404

의 의의 of of of of of of of of의 을 전개했습니다./dist christopherkade.github.io제 웹사이트가 성공적으로 전개되었습니다.

, 바를 때(「 」 「 」 「 」 「 。christopherkade.com/posts ★★★★★★★★★★★★★★★★★」christopherkade.com/work페이지를 새로고침하면 Github 페이지별로 오류가 발생합니다.

404 파일을 찾을 수 없습니다.

라우팅은 다음과 같이 Vue 라우터를 사용하여 이루어집니다.

export default new Router({
  mode: 'history',
  routes: [    
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/work',
      name: 'Work',
      component: Work
    },
    {
      path: '/posts',
      name: 'Posts',
      component: Posts
    },
    { path: '*', component: Home }
  ]
})

제 프로젝트는 다음과 같이 구성되어 있습니다.

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../docs/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../docs'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

이 문제의 원인은 무엇입니까?

그러나 navbar(christopherkade.com/posts 또는 christopherkade.com/work))를 사용하여 페이지 404를 새로고침하면 파일을 찾을 수 없습니다.

이유를 하겠습니다.404 File not found 있다

christopherkade.com/posts.브라우저는 의 대상이 입니다.이 웹 브라우저는 도메인이 사용되는 머신입니다.christopherkade.com접속되어 있습니다.

''/posts, 는 신의 for for for for in in의 、 는 for 、 는 for 、 for for for 。/posts서버에 존재하지 않습니다. ★★★★★★★★★★★★★★★★★.404 is displayed

이 문제를 해결할 방법은 몇 가지 있습니다.

을 때 하지 않도록 christopherkade.com/posts , , , ,는 가지고 .mode : 'hash'

?mode : 'hash'가 있습니까 이것이 문제를 해결하는 한 가지 방법입니다.

mode : 'hash'는 기본 즉, 가 "" "http" "http" "http" "http" "http" "http" "http" "http" "http" "http" "http" "http" "" "http" 뒤에 있는 상세 내용을 트리거하지 않도록 .#

「」를 트리거 , 「」가 됩니다.christopherkade.com/#/posts,christopherkade.com되면, 「」가 됩니다./posts에서의 루트route config출됩니니다다

할 수 , 한 것이 합니다.#에서

그 후, 패스가 송신될 때마다 서버가 같은 페이지로 응답하도록 서버를 설정할 수 있습니다.브라우저에서 응답이 수신되면 루트가 자동으로 시작됩니다.

현재 프로그램에서도 페이지 내의 링크(work, posts 등)를 클릭하면 routeConfig가 시작됩니다.이는 현시점에서는 브라우저 동작이 호출되지 않기 때문입니다.

당신의 경우 github을 사용하여 이 앱을 호스팅하고 있습니다.이 문제를 해결하려면 제가 직접 특정 솔루션을 찾아야 합니다.답변을 받으면 업데이트 하겠습니다.

이게 도움이 됐길 바라.

은 실제로 합니다.christopherkade.com/posts않는 이에서 실행되는 됩니다).index.html).

독자적으로 서버를 실행하고 있는 경우는, 아마, 그 서버를 설정해 버렸을 가능성이 있습니다.index.htmlVue 어플리케이션은 임의의 경로에서 로드되어 라우팅이 자동으로 처리됩니다.

GitHub 페이지라고 하면, 제가 설명한 것과 같이 동작하도록 설정할 수는 없습니다만, 다행히 커스텀 404 페이지를 사용하는 회피책이 있습니다.https://github.com/rafrex/spa-github-pages

간단한 회피책으로 이 문제를 해결할 수 있습니다.저는 이 문제에 대한 여러 이슈를 읽으면서 얻은 모든 통찰력을 종합하여 최종적으로 이 문제를 해결하는 데 도움이 되었습니다.

솔루션 로직 - 필요한 것은index.html라는 이름으로404.htmldist폴더

수정 절차

너에게로 가package.json파일에서는 스크립트에서 다음과 같이 "deploy"라는 새 스크립트를 추가합니다. 페이지를 작성한 후 매번 이 스크립트를 실행하면 됩니다.자동으로 문제가 해결됩니다.

    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "deploy": "cd dist && cp index.html 404.html && cd .. && gh-pages -d dist"
    },

그러면 index.html이 복사되고 이름이 404.html로 바뀌며,dist분기 아래의 폴더gh-pages그 후 스크립트는 다음과 같이 vue ui에 표시됩니다.

또는

사용하시는 경우git subtree push --prefix dist origin gh-pages푸시 방법 및 편집 방법deploy을 대본으로 쓰다package.json아래까지

"deploy": "cd dist && cp index.html 404.html

다음 git 명령어를 실행합니다.PS, 수동으로 사용하기 전에 이 스크립트를 실행하는 것을 잊지 마십시오.npm script메서드 또는 에서vue ui

git subtree push --prefix dist origin gh-pages

이 문제를 해결하기 위해,index.html로 이름을 변경했습니다.404.html.

이 방법으로 페이지가 새로고침되어도 올바른 페이지가 표시됩니다만, 이 페이지는404.html file.

vue를 사용하는 nuxt를 추천합니다만, 다음과 같은 방법으로 모든 루트에 대해 html 페이지를 생성할 수 있습니다.

$ nuxt generate

★★
이데올로기 때문에

Nuxt FAQ - GitHub 페이지에 전개하는 방법

회피책으로 (스크립트를 사용하여) 각 경로의 폴더를 만들고 모든 경로에 index.html을 배치했습니다.

404는 여전히 작동하지 않는다.

Nuxt를 사용하면 문제가 해결됩니다.

레이아웃/공백표시하다

<template>
  <nuxt />
</template>

페이지/패키지표시하다

<template>
  <div></div>
</template>

<script>
export default {
  layout: 'blank',
  fetch({base, redirect, query}) {
    const param = query.p
    if (param === undefined) {
      return redirect('/')
    }
    const redirectPath = '/' + param.replace(base, '')
    return redirect(redirectPath)
  }
}
</script>

스태틱/404.199

<html>
<head>
  <script>
    var pathName = window.location.pathname;
    var redirectPath = '/<repository-name>/redirect';
    location.href = redirectPath + '?p=' + encodeURI(pathName);
  </script>
</head>
</html>

https://gist.github.com/orimajp/2541a8cde9abf3a925dffd052ced9008

언급URL : https://stackoverflow.com/questions/48521177/404-when-reloading-a-vue-website-published-to-github-pages