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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!