vue+resolve를 최적화하는 방법

이번에는 vue+resolve를 최적화하는 방법과 notes가 vue+resolve를 최적화하는 방법에 대해 설명하겠습니다. 다음은 실제 사례입니다.

vue-cli를 통해 vue+webpack 프로젝트를 생성할 때 대부분은 이미 구성되어 있지만 개발을 용이하게 하기 위해 경로를 최적화할 수 있습니다.

1.resolve.extensions

webpack.base.conf.js에서 아래와 같이 확장자가 array인 확인 구성을 볼 수 있습니다.

extensions: ['.js', '.vue', '.json'],

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

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

아래의 파일을 참조합니다. 이때 별칭 아래의 구성은 사용할 수 없으며 일반 구성 방법을 사용해야 합니다. 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

위 내용은 vue+resolve를 최적화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!