이번에는 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">
및 배경 배경
<img src"./logo.png">
和背景<a href="http://www.php.cn/wiki/892.html" target="_blank">background</a>: 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
有~前缀的路径。 ~被认为是一个模块请求,同<a href="http://www.php.cn/wiki/136.html" target="_blank">require</a>('some-module/image.png')
: url(./logo.png), "./logo.png"는 상대 경로이며 Webpack에 의해 종속성으로 로드됩니다.
리소스 소개 규칙
./assets/logo.png와 같은 상대 경로는 모듈 종속성으로 구문 분석됩니다. 이는 Webpack 출력 구성에 따라 자동으로 생성된 URL로 대체됩니다. assets/logo.png와 같이 접두사가 없는 경로는 상대 경로와 동일하며 ./assets/logo.png접두사가 ~인 경로로 이스케이프됩니다. ~는<a href="http://www.php.cn/wiki/136.html" target="_blank">require<p>('some-module/image.html"과 같은 모듈 요청으로 간주됩니다. png')</p></a>
. /assets/log.png
computed: { background () { return require('./bgs/' + this.id + '.jpg') } }
위 내용은 vue-cli+webpack 정적 리소스 처리 및 webpack 패키징 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!