Vue를 사용하여 경로에서 # 기호를 제거하는 방법

이번에는 Vue를 사용하여 경로에서 # 기호를 제거하는 방법을 보여 드리겠습니다. Vue를 사용하여 경로에서 # 기호를 제거할 때 주의 사항은 무엇입니까?

우리 모두 알고 있듯이 vue-router에는 해시 모드와 히스토리 모드의 두 가지 모드가 있습니다.

#이 있는 것이 해시 모드입니다.

라우터의 모드를 기록으로 설정하면 됩니다

그러다가 인터페이스를 새로 고치자마자 404로 변경되는 문제가 발생합니다! ! ! !

온라인으로 검색한 후 백엔드 환경을 구성해야 합니다.

여기에는 nginx 구성만 나열되어 있습니다. 다른 구성을 보려면 여기를 클릭하여 공식 웹사이트로 이동하세요.

먼저 config/index.js를 구성하세요

assetsPublicPath를 루트 디렉터리로 수정하세요

module.exports = {
  build: {
      env: require('./prod.env'),
      index: path.resolve(dirname, '../dist/index.html'),
      assetsRoot: path.resolve(dirname, '../dist'),
      assetsSubDirectory: 'static',
      assetsPublicPath: '/',   // hash 模式会默认的在此处 添加为 assetsPublicPath: './'
      productionSourceMap: true,
      ...
    }
}

그런 다음 nignx를 구성하세요

server {
    listen 0.0.0.0:12345;
    location / {
        root /home/我的应用跟目录;
        try_files $uri $uri/ /index.html =404;  // 这个是重点
    }
    error_page 404 /index.html
}

Url에는 더 이상 #, more Perfect

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

추천 자료:

Vue 소스 코드를 사용하여 이벤트 메커니즘을 구문 분석하는 방법

JS를 작동하여 사용자의 도시와 지리적 위치를 얻는 방법

위 내용은 Vue를 사용하여 경로에서 # 기호를 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!