> 웹 프론트엔드 > JS 튜토리얼 > Vue 경로 최적화의 해결에 대한 자세한 설명

Vue 경로 최적화의 해결에 대한 자세한 설명

小云云
풀어 주다: 2018-01-29 10:32:10
원래의
4279명이 탐색했습니다.

vue-cli를 통해 vue+webpack 프로젝트를 생성할 때 대부분은 이미 구성되어 있지만 개발을 용이하게 하기 위해 경로를 최적화할 수 있습니다. 이 글은 주로 Vue 경로 최적화에 대한 해결 방법을 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 여러분과 공유하고 참고할 것입니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

1.resolve.extensions

webpack.base.conf.js에서는 아래와 같이 Extensions가 배열인 확인 구성을 볼 수 있습니다.


extensions: ['.js', '.vue', '.json'],
로그인 후 복사

이 구성을 사용하면 라우팅을 통해 컴포넌트에 컴포넌트를 적용하면 다음과 같이 보다 편리하게 적용할 수 있습니다.


import Hello from '@components/Hello';
로그인 후 복사
로그인 후 복사

즉, Hello.vue 컴포넌트는 .vue 접미사를 추가하지 않고도 참조할 수 있습니다. @comComponents/Hello.vue 이 파일을 소개합니다.

2.resolve.alias

구성 요소가 서로를 참조하는 경우 다음과 같이 보일 수 있습니다.


import Hello from '../src.components/Hello';
로그인 후 복사

경로는 현재 페이지를 기준으로 합니다. 하지만 중첩이 더 복잡하면 작성하기가 더 번거로워집니다. 하지만 다음과 같은 구성을 전달하면:


 resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@pages': path.join(__dirname, "..", "src", "pages"),
   "@components": path.join(__dirname, "..", "src", "components"),
   // 注意: 静态资源通过src,不能这么设置。
   // "@assets": path.join(__dirname, "..", "src", "assets"),
  }
로그인 후 복사

vue$가 vue 도입을 의미하는 경우 다음과 같이 작성할 수 있습니다.


import Vue from 'vue'
로그인 후 복사

또한 @pages 및 @comComponents를 직접 인용할 수 있으므로 비용이 절약됩니다. 복잡한 응용프로그램이 많으므로 @를 사용하면 모호함을 없앨 수 있습니다. 아래와 같이:


import Hello from '@components/Hello';
로그인 후 복사
로그인 후 복사


import App from '@pages/App'
로그인 후 복사

주목할 가치가 있습니다. webpack.config.js에서는 ../ 및 ./를 사용할 수 없지만 path.join을 사용하고 _ _dirname은 경로를 나타냅니다. 그렇지 않으면 오류가 보고됩니다.

추가: 구성 요소에서는 일부 정적 파일, 즉 static 아래의 파일을 참조합니다. 이때 별칭 아래의 구성을 사용할 수 없으며 일반적인 구성 방법을 사용해야 합니다.

관련 권장 사항:

MySql은 외부 네트워크 연결 클라이언트가 너무 느린 문제를 해결하기 위해 이름 건너뛰기 해결을 사용합니다

위 내용은 Vue 경로 최적화의 해결에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿