자산 및 정적 사용 사례 분석

이번에는 자산 및 정적 사용 사례에 대한 분석을 가져오겠습니다. 자산 및 정적 사용 시 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

리소스 파일 처리

우리 프로젝트 구조에는 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 중국어 웹사이트에서!

추천 도서:

vue+props를 사용하여 데이터를 전송하는 방법

SQL 일반 및 mybatis 일반 사용에 대한 자세한 설명

위 내용은 자산 및 정적 사용 사례 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!