vue2.0 리소스 파일 자산과 정적 파일의 차이점에 대한 자세한 설명

이 글에서는 주로 vue2.0 리소스 파일 자산과 정적 파일의 차이점을 소개하고 참고 자료를 제공합니다.

리소스 파일 처리

프로젝트 구조에는 src/assets 및 static/이라는 두 가지 리소스 파일 경로가 있습니다. 그렇다면 둘 사이의 차이점은 무엇입니까?

Webpacked Resources

이 질문에 대답하려면 먼저 webpack이 정적 리소스를 처리하는 방법을 이해해야 합니다. *.vue 구성 요소에서 모든 템플릿과 CSS는 vue-html-loader 및 css-loader에 의해 구문 분석되어 리소스의 URL을 찾습니다.

예를 들어 6b1107076a21b84c95dbb8e2465f1198 및 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의 모듈 처리 구성을 활용하려면 이 접두사를 사용하세요. 예를 들어 자산에 대한 경로 해상도가 있는 경우 2aee3c5bbfa6ccdf4fd14f787793fd55를 사용하여 해상도가 올바른지 확인해야 합니다. 루트 디렉터리에 상대적인 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/[파일 이름]이 됩니다.

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

관련 기사:

ajax를 사용하여 새로 고침 없이 페이지 콘텐츠 및 주소 표시줄 URL 변경

JavaScript는 Ajax를 기반으로 하여 새로 고침 없이 웹 페이지에 파일 콘텐츠를 동적으로 표시합니다.

XML의 AJAX 처리 서버 Method

에서 반환됨

위 내용은 vue2.0 리소스 파일 자산과 정적 파일의 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!