webpack+vue에서 정적 이미지 주소를 참조하기 위해 별칭 경로를 사용하는 예에 대한 자세한 설명

webpack 별칭의 이점은 누구나 알고 있지만 Vue 템플릿에서는 이미지 주소에 별칭을 사용할 때 항상 문제가 발생합니다. 오랫동안 해결책을 찾지 못한 적이 있습니다. 이 글에서는 정적 이미지 주소를 참조하기 위해 webpack+vue에서 별칭 경로를 사용하는 방법을 주로 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

alias: {
 'src': path.resolve(__dirname, '../src'),
 'assets': path.resolve(__dirname, '../src/assets'),
 'components': path.resolve(__dirname, '../src/components')
}

<template>
 <img src="assets/images/logo.jpg" />
</template>
<script>
import &#39;assets/css/style.css&#39;
</script>
<style>
.logo {
 background: url(asset/images/bg.jpg)
}
</style>

위 코드에서 style.css 도입만 성공하고, 이미지 주소와 배경 이미지 주소 파싱이 실패하는 것을 확인할 수 있습니다...

다양한 검색 끝에 이유를 찾으세요(이때 이러한 기술 콘텐츠에 대한 Baidu 검색은 정말 쓰레기 사이의 싸움이라는 것을 알게 될 것입니다). 그리고 마침내 이유를 찾았습니다...

vue-html-loader 및 css-loader는 루트가 아닌 번역을 번역합니다 상대 경로에 대한 URL을 모듈 경로처럼 처리하려면 ~

접두사를 사용하여 별칭 앞에 ~

을 추가합니다. 최종 코드는 다음과 같습니다.

의미: 로더에게 모듈이고 상대 경로가 아님을 알려줍니다.

참고: 템플릿의 정적 파일 주소와 스타일의 정적 파일 주소만 스크립트에 추가해야 합니다. 별칭이 정의된 대로 작성하면 됩니다.

이제 몇 달 동안 고생했는데 드디어 문제가 해결되었습니다...

그나저나 제가 사용하는 별칭 목록을 올려드리겠습니다:

alias: {
 'src': path.resolve(__dirname, '../src'),
 'assets': path.resolve(__dirname, '../src/assets'),
 'components': path.resolve(__dirname, '../src/components')
}

관련 권장사항:

페이지의 모든 이미지 주소를 가져오기 위한 PHP 일반 코드 예제

정규식 처리 이미지 주소 및 img 태그에 대한 메서드 요약 및 공유

이미지 주소 교체 방법(img src) JavaScript 정규식을 사용한 문자열

위 내용은 webpack+vue에서 정적 이미지 주소를 참조하기 위해 별칭 경로를 사용하는 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!