Vue에서 절대 경로 참조를 사용하는 cli 관련 문제

이 글에서는 주로 vue cli에서 참조 이미지에 대한 절대 경로를 사용하는 문제에 대한 솔루션을 소개합니다. 이 글에서는 이를 필요한 모든 사람의 공부나 업무에 대한 특정 참조 학습 가치가 있습니다. 아래에서 따라해 보세요. 편집자와 함께 살펴보겠습니다.

머리말

Vue란 무엇인가요? 이는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다(공식 웹사이트의 설명). 간단한 대답은 이러한 개념이 가장 적게 옹호된다는 것입니다. 천 명의 독자, 천 개의 햄릿을 이해하려면 너무 많은 설명은 필요하지 않습니다. 공식 Vue 문서는 매우 포괄적입니다.

Vue는 지난 2년 동안 인기 있는 프런트 엔드 프레임워크(프로그레시브 프레임워크)입니다. 이 글에서는 vue cli에서 이미지 참조에 절대 경로를 사용하는 문제에 대해 자세히 소개하고 참고 및 연구를 위해 공유합니다. .. 아래에서는 길게 말하지 않겠습니다. 함께 살펴보겠습니다.

텍스트:

js에서 require()를 사용하면 페이지에서 절대 경로를 사용할 수 있습니다.

data (){
 return {
  src: require('IMAGES/banner.jpg')
 }
}

<img :src="src">

이미지 리소스가 정적으로 배치되지 않는 한 스타일에서 절대 경로를 사용할 수 없는 것 같습니다. 그리고 이렇게 인용할 수 있습니다

background: url("/static/images/banner.jpg") no-repeat;

그러나 정적으로 넣은 후에 webpack은 리소스를 릴리스 디렉터리에만 복사하고 작은 이미지를 base64에 최적화하지 않습니다.

이미지 리소스는 균형을 위해 최적화될 수 있으므로 이미지 리소스를 정적으로 두는 것은 여전히 ​​적합하지 않습니다. 그러나 vue 페이지의 스타일 태그에 스타일을 작성할 때 디렉토리가 깊어질수록 참조 경로는 다음과 같을 수 있습니다.

background: url("../../../images/banner.jpg") no-repeat;

효과가 있는 것 같은 방법이 있습니다 문제를 해결하세요:

스타일 파일을 스타일 폴더에 넣고 스타일 이미지 리소스에 대한 상대 경로를 사용한 다음 src 속성을 사용하여 스타일 태그에 스타일을 도입합니다. 너무 많은 반품을 피할 수 있습니다 ~~

── src
 ── images
  ── banner.jpg
 ── style
  ── index.scss

/*style*/
background: url("../images/banner.jpg") no-repeat;

<style src="STYLE/index" lang="scss"></style>

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

js의 객체에 배열을 추가하는 방법

gulp를 사용하여 전체 프로젝트 프로세스를 만드는 방법

vue에서 axios를 사용하여 파일 업로드 구현

JavaScript에서 방법 사진을 더 크게 만들려면

vue에서 스타일을 전환하는 방법

위 내용은 Vue에서 절대 경로 참조를 사용하는 cli 관련 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!