IE 라우팅에서 리디렉션할 때 Vue 프로젝트에서 오류를 보고하면 어떻게 해야 합니까?

Vue.js 프레임워크를 사용하여 프로젝트를 개발하고 Vue Router를 사용하여 경로를 관리하는 경우 문제가 발생할 수 있습니다. IE 브라우저에서 경로 점프가 오류를 보고합니다.

이 문제는 일반적으로 Vue Router가 HTML5의 기록 모드를 사용하지만 IE 브라우저는 이 모드를 지원하지 않기 때문에 발생합니다. 하지만 걱정하지 마세요. 아래에서 이 문제를 해결하는 방법을 알려드리겠습니다.

해결책

1. 폴리필 소개

HTML5 기록 모드에서는 브라우저가 HTML5 API를 지원해야 하며 IE 브라우저는 이전 버전의 HTML API만 지원하므로 호환되도록 하려면 폴리필을 사용해야 합니다.

다음 코드를 사용하여 폴리필을 도입할 수 있습니다.

<!-- 引入 polyfill -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

2. 라우팅 모드 구성

IE 브라우저가 기록 모드를 지원하지 않는 문제를 해결하려면 Vue Router의 라우팅 모드를 수정해야 합니다. 기본 기록 모드에서 해시 모드로 변경합니다.

Vue Router의 구성 파일에서 다음 코드를 찾습니다.

const router = new VueRouter({
  mode: 'history',
  routes
})

mode 的值由 history 改为 hash를 다음으로 변경합니다.

const router = new VueRouter({
  mode: 'hash',
  routes
})

3. 서버 구성

프로젝트가 배포 중에 서버와 상호 작용해야 하는 경우 경로 점프를 지원하는 서버입니다. Vue Router의 기록 모드를 사용할 때 사용자가 브라우저 주소 표시줄에 주소를 입력하면 서버는 사용자가 해당 주소 아래의 파일이나 디렉터리에 액세스해야 한다고 가정하고 기본적으로 서버에 요청을 보냅니다. 처리를 위한 파일 시스템. 그러나 실제로 우리가 선호하는 것은 현재 페이지가 올바르게 렌더링될 수 있도록 처리를 위해 Vue Router에 요청을 보내는 것입니다.

Node.js를 서버로 사용하는 경우 다음 코드를 통해 구성할 수 있습니다.

const express = require('express')
const app = express()

app.use(express.static(__dirname + '/dist'))

// 对所有请求都返回 index.html 文件
app.get('*', function(req, res) {
  res.sendFile(__dirname + '/dist/index.html')
})

const port = process.env.PORT || 8080
app.listen(port, () => {
  console.log(`Server started at ${port}`)
})

위 코드는 Express 프레임워크를 사용하고 웹사이트의 정적 리소스를 저장하기 위한 정적 폴더를 설정합니다. 모든 요청에 ​​대해 Vue Router가 제대로 작동하고 리디렉션 요청을 처리하는지 확인하기 위해 index.html 파일이 반환됩니다.

요약

위는 IE 브라우저에서 Vue 프로젝트의 라우팅 점프 오류를 해결하는 방법입니다. 이 문제가 발생하면 호환성을 위해 폴리필을 사용하거나, 라우팅 모드를 수정하거나, 수정 사항이 올바른지 확인하는 전제 하에 프로젝트가 IE 브라우저에서 정상적으로 실행될 수 있습니다.

위 내용은 IE 라우팅에서 리디렉션할 때 Vue 프로젝트에서 오류를 보고하면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!