Vue에서 액세스 페이지 경로를 패키징하고 수정하는 방법

Vue가 패키징된 후 기본 액세스 경로는 /index.html입니다. 액세스 경로를 수정해야 하는 경우 아래 단계를 따르세요.

1. config/index.js 파일 열기

Vue 프로젝트가 생성된 후 config 디렉터리에서 index.js 파일을 확인하고 파일을 열 수 있습니다.

2. build.assetsPublicPath 수정

파일에서 build.assetsPublicPath를 찾으세요. 이 속성은 정적 리소스의 공개 경로, 즉 생성된 index.html 파일에서 정적 리소스를 참조하는 경로를 나타냅니다.

기본값은 '/'입니다. 이는 정적 리소스의 경로가 index.html 파일이 있는 루트 디렉터리를 기준으로 함을 의미합니다.

액세스 경로를 '/myApp/'로 수정해야 하는 경우 build.assetsPublicPath 값을 '/myApp/'로 설정해야 합니다.

assetsPublicPath: '/myApp/'

3. build.assetsSubDirectory 수정

동일 파일에서 build.assetsSubDirectory를 찾으세요. 이 속성은 정적 리소스가 저장되는 디렉터리를 나타냅니다.

기본값은 'static'입니다. 이는 정적 리소스가 프로젝트 루트 디렉터리 아래의 static 디렉터리에 저장된다는 의미입니다.

프로젝트 루트 디렉터리 아래 myApp/static 디렉터리에 정적 리소스를 저장해야 하는 경우 build.assetsSubDirectory 값을 'myApp/static'으로 설정해야 합니다.

assetsSubDirectory: 'myApp/static'

4. 라우터 모드 수정

페이지 라우팅에 라우터 모드를 사용하는 경우 라우터 모드도 수정해야 합니다.

router/index.js 파일에서 Router 인스턴스를 생성하는 코드를 찾습니다.

const router = new Router({
  mode: 'history',
  routes: [...]
})

모드를 'hash'로 변경합니다. 이는 페이지 라우팅에 해시 모드를 사용한다는 의미입니다.

const router = new Router({
  mode: 'hash',
  routes: [...]
})

5. 패키징 명령 실행

위 구성을 수정한 후 패키징을 위해 패키징 명령을 다시 실행해야 합니다.

패키징 명령 실행:

npm run build

패키징이 완료되기를 기다린 후 생성된 파일을 서버에 배포할 수 있으며, 액세스 경로는 설정된 경로입니다.

위 내용은 Vue에서 액세스 페이지 경로를 패키징하고 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!