Uniapp이 H5 버전으로 출시될 때 액세스 경로에서 # 기호를 숨기는 방법

유니앱은 모바일 앱과 소규모 프로그램 개발에 큰 인기를 끌었습니다. 때로는 H5 기능이 한 터미널의 기능 모듈 코드를 다시 작성하는 대신 APP 애플릿의 기능을 동기화할 수 있도록 uniapp 패키징을 통해 H5/wap 버전을 생성해야 합니다.

하지만 H5 버전을 개발할 때 페이지 액세스 경로에 "#" 기호가 있는 것을 발견했습니다. 예: https://h5.shopwind.net/#/pages/index/index 이는 단지 영향을 미치는 것이 아닙니다. 그러나 어떤 경우에는 "#" 기호가 필터링되어 라우팅 오류가 발생합니다. 예를 들어 H5 측 WeChat 공식 계정에 로그인하면 "#" 기호가 있는 반송 주소가 표시됩니다. 자동으로 필터링되어 올바른 페이지로 다시 호출할 수 없는 경우 해결 방법은 다음과 같습니다.

1. Hbuilder 도구를 사용하여 Manifest.json 파일을 열고 다음으로 이동합니다. H5 구성->라우팅 모드 ->히스토리 모드 선택

이때 페이지를 열면 삭제된 것을 보실 수 있습니다. "#" 표시가 추가되어 정상적으로 접속이 가능했습니다. "404" 오류가 보고되었습니다. URL이 잘못된 것인지 눈을 뜨고 꼼꼼히 확인해보니 URL이 잘못된 것이 아니었습니다! ! 이상해요!
걱정하지 마세요. 위의 문제를 해결하려면 다음을 이해해야 합니다.
1) 해시 - 주소 표시줄의 URL에 있는 # 기호. 해시가 URL에 나타나더라도 HTTP 요청에 포함되지 않으며 백엔드에 전혀 영향을 미치지 않으므로 해시를 변경해도 페이지가 다시 로드되지 않습니다.
2) 기록 - HTML5 기록 인터페이스의 새로운 pushState() 및 replacementState() 메서드를 활용합니다. 특정 브라우저에서 기록 모드를 지원해야 하며 404 오류가 발생하며 백그라운드 구성이 필요합니다.
3) 해시 모드에서는 https://www.shopwind.net과 같이 해시 기호 앞의 콘텐츠만 요청에 포함되므로 백엔드의 경우 라우팅의 전체 적용 범위가 달성되지 않더라도 404 오류는 반환되지 않습니다.
4) 기록 모드에서 프런트 엔드 URL은 https://www.shopwind.net/a와 같이 실제로 백엔드에 대한 요청을 시작하는 URL과 일치해야 합니다. /. 백엔드에 /a에 대한 라우팅 처리가 부족하면 404 오류가 반환됩니다.

2. 서버 구성

H5 코드를 패키징하고 서버에 업로드한 후 의사 정적 구성이 필요합니다.

기록 모드에서 nginx 구성

location / {
  try_files $uri $uri/ /index.html;
}

기록 모드에서 Apache 구성

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

H5 사례 참조: https://h5.shopwind.net
uniapp 개발 교환

위 내용은 Uniapp이 H5 버전으로 출시될 때 액세스 경로에서 # 기호를 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!