Apache2에서 호스팅하는 Vue 라우터
아파치 서버에서 vuejs 프로젝트를 호스팅하고 있습니다.
- 초기 프로젝트
- 셋업 라우터
- 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
'programing' 카테고리의 다른 글
MySQL에 이미지를 저장할 수 있습니까? (0) | 2022.10.29 |
---|---|
'python'을 입력하면 CMD가 Windows Store를 엽니다. (0) | 2022.10.29 |
mysql - 월별 및 년별 합계 (0) | 2022.10.29 |
쉐이드 플러그인으로 생성된 종속성 감소 pom.xml의 목적은 무엇입니까? (0) | 2022.10.29 |
TypeScript에서 문자열 보간을 수행하는 방법은 무엇입니까? (0) | 2022.10.28 |