vue-cli 및 webpack이 정적 리소스를 처리하는 방법과 webpack 패키징 사용 단계에 대한 자세한 설명

이번에는 vue-cli와 webpack이 정적 리소스를 처리하는 방법과 webpack 패키징을 사용하는 단계에 대해 자세히 설명하겠습니다. vue-cli와 webpack에서 정적 리소스를 처리하는 방법은 무엇이며 webpack 패키징 사용 시 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

Vue-cli를 통한 웹팩 패키징의 함정

Vue 프로젝트를 위해 Vue-cli가 구축한 스캐폴딩은 정말 편리하지만 패키징할 때 빈 페이지가 생기기 쉽거나 해당 정적 리소스를 사용할 수 없습니다. 짐을 실은.

project/config 아래 index.js의AssetPublicPath를 './'로 변경하고 상대 경로로 변환하여 해결했습니다.

cd vue demo 
 npm run dev //运行程序 
npm run bulid //webpack打包

정적 리소스 처리

vue-cli와 webpack을 결합한 프로젝트에는 일반적으로 src/assets와 static/이라는 두 가지 정적 리소스 경로가 있다는 것을 알 수 있습니다. 이번 글에서는 주로 vue-cli와 webpack을 결합하여 정적 리소스를 처리하는 방법을 소개하고 있는데, 편집자는 꽤 좋다고 생각해서 지금부터 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

Packaged resources

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

예를 들어 <img src"./logo.png"> 및 배경 background: url(./logo.png),"./ logo .png"는 상대 경로이며 Webpack에 의해 종속성으로 로드됩니다. <img src"./logo.png">和背景background: url(./logo.png)，”./logo.png”是一个相对路径，会被Webpack当做一个依赖加载。

但是因为logo.png并不是JavaScript，所以如果被当成一个依赖的花，我们需要通过url-loader和file-loader来解析它。这个模板已经为你配置了相应的loader，所以你通常不用担心相对路径的部署问题。

即使这些资源有可能在构建过程中被内联/拷贝/重命名，他们也是源码重要组成部分。这就是为什么我们建议单独在/src文件夹里放置静态资源，如同其他的资源文件夹。

事实上，你都不必把他们全放在/src/assets，你可以根据模块/组件来组织利用他们。比如说，你可以把任一组件放到他们自己的目录，并在该目录下存放静态资源。

资源引入规则

相对路径，比如 ./assets/logo.png会被解析成模块依赖。它们会被一个基于你Webpack输出配置的自动生成URL替代。

没有前缀的路径，比如assets/logo.png，同相对路径，转义成./assets/logo.png

有~前缀的路径。 ~被认为是一个模块请求，同require('some-module/image.png')

하지만 logo.png는 JavaScript가 아니기 때문에 종속 꽃으로 간주되면 url-loader와 file-loader를 통해 구문 분석해야 합니다. 이 템플릿에는 해당 로더가 이미 구성되어 있으므로 일반적으로 상대 경로 배포 문제에 대해 걱정할 필요가 없습니다.

이러한 리소스는 빌드 프로세스 중에 인라인/복사/이름 변경될 수 있지만 여전히 소스 코드의 중요한 부분입니다. 그렇기 때문에 다른 리소스 폴더와 마찬가지로 정적 리소스를 별도의 /src 폴더에 배치하는 것이 좋습니다. 사실 꼭 /src/assets에 다 넣을 필요는 없고, 모듈/컴포넌트별로 정리해서 활용하면 됩니다. 예를 들어 모든 구성 요소를 자체 디렉터리에 넣고 해당 디렉터리에 정적 리소스를 저장할 수 있습니다.

리소스 소개 규칙

./assets/logo.png와 같은 상대 경로는 모듈 종속성으로 구문 분석됩니다. 이는 Webpack 출력 구성에 따라 자동으로 생성된 URL로 대체됩니다.

assets/logo.png와 같이 접두사가 없는 경로는 상대 경로와 동일하며 ./assets/logo.png

접두사가 ~인 경로로 이스케이프됩니다. ~는 require('some-module/image.png')와 마찬가지로 모듈 요청으로 간주됩니다. /assets/log.png

JavaScript에서 리소스 경로 가져오기

computed: {
 background () {
 return require('./bgs/' + this.id + '.jpg')
 }
}

와 같은 루트 경로 이 리소스 경로는 file-loader에서도 처리되어 처리된 경로를 반환합니다. 그리고 Webpack은 bgs 디렉터리의 모든 이미지를 한 번에 로드합니다.

"실제" 정적 리소스

🎜🎜반면, static/에 있는 파일은 Webpack에서 처리되지 않습니다. 해당 파일은 대상 폴더에 직접 복사되며, 이러한 파일을 참조하려면 절대 경로를 사용해야 합니다. 🎜🎜이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 도서: 🎜🎜🎜Vue 입력을 조작하여 확인 문자와 숫자 조합을 입력하는 방법과 길이가 30자 미만입니다🎜🎜🎜🎜🎜Vue를 조작하여 Amap을 만들고 실시간 버스 애플리케이션을 구축하는 방법🎜🎜 🎜

위 내용은 vue-cli 및 webpack이 정적 리소스를 처리하는 방법과 webpack 패키징 사용 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!