programing

Apache2에서 호스팅하는 Vue 라우터

sourcetip 2022. 10. 29. 16:15
반응형

Apache2에서 호스팅하는 Vue 라우터

아파치 서버에서 vuejs 프로젝트를 호스팅하고 있습니다.

  1. 초기 프로젝트
  2. 셋업 라우터
  3. Apache 서버 구축 및 호스트

const router = new VueRouter({
  routes: Routes,
  // relative: true,
  mode: 'history'
});

로컬에서는 정상적으로 동작하지만 서버에서는 vue 라우터가 파손됩니다.

http://example.com을 실행하고 http://exmaple.com/sub에 접속하면 정상적으로 동작합니다.

페이지를 새로 고치면 404 에러가 발생합니다.

오류:

vue.js 문서 페이지에서 다음을 수행합니다.

이력 모드를 사용하는 경우, URL은 「normal」(예:http://oursite.com/user/id)로 표시됩니다.예쁘다!

단, 여기 문제가 있습니다.우리 앱은 1페이지 클라이언트 측 앱이기 때문에 적절한 서버 구성이 없으면 사용자가 브라우저에서 직접 http://oursite.com/user/id에 접속하면 404 오류가 발생합니다.이제 그건 못생겼다.

안심:이 문제를 해결하려면 서버에 단순한 캐치-올 폴백루트를 추가하면 됩니다.URL이 정적 자산과 일치하지 않는 경우 앱이 있는 index.html 페이지와 동일한 서비스를 제공해야 합니다.다시 아름답군!

아파치

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

SPA가 서브폴더에 있기 때문에 이 방법이 효과가 있었습니다.이것을 .htaccess 파일에 씁니다.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /subdirectoryName
RewriteRule ^subdirectoryName/index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /subdirectoryName/index.html [L]
</IfModule>

웹사이트 폴더: C:\xampp\htdocs\dist

.htaccess 파일 사용:C:\xampp\htdocs\dist\.htaccess

크레딧 : https://gist.github.com/Prezens/f99fd28124b5557eb16816229391afee

안녕하세요, Linux os를 사용하는 경우 다음 경로를 이용하십시오./etc/apache2/sites-enabled/000-default.conf그리고 다음 코드를 추가합니다.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^index\.html$ - [L]
  RewriteCond /var/www/html/%{REQUEST_FILENAME} !-f
  RewriteCond /var/www/html/%{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

당신 문제가 아닌 것 같군요apache .htaccess 문제: 로컬에 해당 파일이 있고 서버에 해당 파일이 없을 수 있습니다.

.htaccess를 서버에 숨김 파일로 업로드한 것을 확인하시면 업로드하는 것을 잊어버릴 수 있습니다.

여기에 없는 경우는, 다음의 레퍼런스 헬프를 확인해 주세요.https://router.vuejs.org/en/essentials/history-mode.html

.htaccess 파일이 없으면 추가합니다.

언급URL : https://stackoverflow.com/questions/47879936/vue-router-hosting-on-apache2

반응형