vue2.0 리소스 파일 자산 및 정적 사용 방법
- php中世界最好的语言원래의
- 2018-05-26 14:38:411969검색
이번에는 vue2.0 리소스 파일 자산과 static을 어떻게 사용하는지, vue2.0 리소스 파일 자산과 static을 사용할 때 주의사항은 무엇인지 알려드리겠습니다. 다음은 실제 사례입니다.
Resources파일 처리
우리 프로젝트 구조에는 src/assets 및 static/이라는 두 가지 리소스 파일 경로가 있습니다. 그렇다면 둘 사이의 차이점은 무엇입니까?
Webpacked Resources
이 질문에 대답하려면 먼저 webpack이 정적 리소스를 처리하는 방법을 이해해야 합니다. *.vue 구성 요소에서 모든 템플릿과 CSS는 vue-html-loader 및 css-loader에 의해 구문 분석되어 리소스의 URL을 찾습니다.
예를 들어 
및 Background: url(./logo.png), "./logo.png"에서는 둘 다 상대 리소스 경로입니다. Webpack에 의해 모듈 종속성으로 구문 분석됩니다.
logo.png는 JavaScript가 아니므로 모듈 종속성으로 간주될 경우 url-loader 및 file-loader를 사용하여 처리해야 합니다. 템플릿에는 이미 이러한 로더가 구성되어 있으므로 배포에 대해 걱정할 필요 없이 상대/모듈 경로를 사용할 수 있습니다. 이러한 리소스는 빌드 시 인라인/복사/이름 변경될 수 있으므로 기본적으로 소스 코드의 일부입니다. 이것이 바로 webpack에서 처리되는 정적 리소스를 다른 소스 파일과 마찬가지로 /src 경로 아래에 배치하는 것을 권장하는 이유입니다. 실제로 /src/assets 아래에 모두 넣을 필요도 없습니다. 모듈/구성 요소 사용에 따라 파일 구조를 구성할 수 있습니다. 예를 들어 각 구성 요소와 해당 정적 리소스를 자체 디렉터리에 배치할 수 있습니다.
리소스 처리 규칙
상대 URL(예: ./assets/logo.png)은 모듈 종속성으로 해석됩니다. 이는 Webpack 출력 구성에 따라 자동으로 생성된 URL로 대체됩니다. 접두사가 없는 URL(예: 자산/logo.png)은 상대 URL로 처리되고 ./assets/logo.png
로 변환됩니다. 접두사가 ~인 URL은 require('some -module)과 유사하게 모듈 요청으로 처리됩니다. /image.png') Webpack의 모듈 처리 구성을 활용하려면 이 접두사를 사용하세요. 예를 들어 자산에 대한 경로 해상도가 있는 경우 
를 사용하여 해상도가 올바른지 확인해야 합니다. 루트 디렉터리에 상대적인 URL(예: /assets/logo.png)은 처리되지 않습니다.
Javascript에서 리소스 경로 가져오기
Webpack이 올바른 리소스 경로를 반환하려면 require('./relative /path/to/file.jpg')는 file-loader에 의해 구문 분석되고 처리된 URL이 반환됩니다. 예:
computed: {
background () {
return require('./bgs/' + this.id + '.jpg')
}
}
위의 예에서 ./bgs/ 경로 아래의 모든 이미지는 최종 빌드에 포함됩니다. 이는 Webpack이 런타임에 어떤 이미지가 사용될지 추측할 수 없기 때문입니다. 그들 중.
“실제” 정적 리소스
비교하자면 static/ 아래의 파일은 Webpack에서 처리되지 않습니다. 동일한 파일 이름을 사용하고 최종 경로에 직접 복사됩니다. config.js에 추가된 build.assetsPublicPath 및 build.assetsSubDirectory에 따라 이러한 파일을 참조절대 경로를 사용해야 합니다.
예를 들어 아래 기본값은
// config/index.js
module.exports = {
// ...
build: {
assetsPublicPath: '/',
assetsSubDirectory: 'static'
}
}
static/ 디렉터리에 있는 모든 파일은 절대 URL /static/[파일 이름]을 사용하여 참조되어야 합니다. AssetSubDirectory의 값을 자산으로 변경하면 해당 URL은 /assets/[파일 이름]이 됩니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 다른 관련 기사를 주목하세요. PHP 중국어 웹사이트에서!
추천 자료:
JS를 사용하여 HTML 태그를 동적으로 추가하는 방법
JS를 사용하여 입력 텍스트 상자 데이터를 얻고 수정하는 방법
위 내용은 vue2.0 리소스 파일 자산 및 정적 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!