资源文件assets和static的不一致详解,cli与webpack结合如何处理静态能源

By admin in 4858美高梅 on 2019年4月4日

财富文件处理

资源文件assets和static的不一致详解,cli与webpack结合如何处理静态能源。在咱们的品种结构里,有八个能源文件的途径,分别是:src/assets 和 static/。这那多少个究竟有何样分别呢?

财富文件处理

因而Vue-cli实行webpack打包的坑

处理静态财富

Webpacked 资源

为了应对那么些题材,我们首先要求明白webpack是怎么处理静态能源的。在*.vue组件中,所有的templates和css都会被vue-html-loader 和 css-loader解析,寻找能源的U宝马X3L。

举个例证,在<img src="./logo.png"> 和 background: url(./logo.png)"./logo.png"中,都是相持能源路径,都会被Webpack解析成模块依赖 。

由于logo.png不是JavaScript,当被视作二个模块依赖的时候,我们要求动用url-loader 和 file-loader展开处理。
该模板已经安排好了那么些loaders,所以您可见利用相对/模块路径时不须要担心安插的标题。

出于那个财富恐怕在营造的时候被内联/复制/重命名,
所以它们从精神上的话是你源码的壹有的。那正是为什么大家提议将交由webpack处理的静态能源和任何源文件壹律坐落/src路线上面。

实际,你如故不须求把它们统统放在/src/assets路线下:你能够依照模块/组件的使用来组织文件结构。例如,你能够把每一种组件和属于它的静态财富放在它本人的目录下。

在大家的档次布局里,有八个能源文件的途径,分别是:src/assets 和
static/。那那个毕竟有哪些分别呢?

Vue-cli为Vue项目搭建的脚手架的确很有益于,但包装时便于现身空白页,可能对应的静态能源加载不了。  

你或许会小心到vue-cli与webpack结合的品类中,大家平时会有多少个静态财富的门道:src/assets和static/,他们相互的区别是何许呢?

财富处理规则

  • 相对URL,
    e.g. ./assets/logo.png 将会被分解成三个模块正视。它们会被三个基于你的Webpack输出配置自动生成的UMuranoL替代。

  • 从不前缀的U路虎极光L,
    e.g. assets/logo.png 将会被当做相对UHummerH二L,并且转换来./assets/logo.png

  • 前缀带~的U福特ExplorerL 会被当成模块请求,
    类似于require('some-module/image.png').
    假诺你想要利用Webpack的模块处理配置,就足以接纳那么些前缀。例如,假诺你有一个对于assets的门径解析,你要求采取<img src="~assets/logo.png">来保管解析是对应上的。

  • 争持根目录的U途观L,
    e.g. /assets/logo.png 是不会被处理的

 

Webpacked 资源

自家是由此将项目/config下的index.js的assetsPublicPath变成’./’,变成相对路径,实行缓解。

装进的财富

在JavaScript里得到财富路径

为了能让Webpack重回正确的能源路径,你须求动用require('./relative/path/to/file.jpg'),由file-loader进展剖析,然后再次回到处理过的U汉兰达L。例如:

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

留意上边的事例,在最后的创设时将会含有./bgs/路线下的保有图片 那是因为Webpack不可能猜出来在运作时会用到里头的哪个,所以会包括全数的。

 

为了应对这些题材,大家先是必要明白webpack是何许处理静态能源的。在*.vue组件中,所有的templates和css都会被vue-html-loader
和 css-loader解析,寻找能源的UOdysseyL。

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

为了回应这一个难点,大家先是要知道Webpack是何等处理静态能源的。在*.vue组件里,全体的templates和CSS模块都被vue-html-loader和css-loader解析来寻觅路径UKugaL。

“真实的” 静态能源

用作对照,在static/下的文本都不会被Webpack处理:它们利用相同的公文名,直接拷贝到最终的途径。你必须使用相对路径来引用这一个文件,取决于在config.js个中加入的build.assetsPublicPath 和 build.assetsSubDirectory

举个例证,下边包车型地铁暗中认可值是:

// config/index.js
module.exports = {
  // ...
  build: {
    assetsPublicPath: '/',
    assetsSubDirectory: 'static'
  }
}

 全体放在 static/目录下的文书都应当是采纳相对化UCR-VL/static/[filename]引用的。假若你将assetSubDirectory的值改成assets
那么这么些U陆风X八L就会被成为 /assets/[filename]

 

举个例证,在 <img src=”./logo.png”> 和 background:
url(./logo.png),
“./logo.png”中,都以对立财富路径,都会被Webpack解析成模块正视 。

拍卖静态能源

举个例证,在<img src”./logo.png”>和背景background:
url(./logo.png),”./logo.png”是3个相对路径,会被Webpack当做几个借助加载。

出于logo.png不是JavaScript,当被视作二个模块重视的时候,我们须求选用url-loader
和 file-loader进行拍卖。
该模板已经安插好了那个loaders,所以您可知运用相对/模块路径时不须要担心布署的难点。由于那些财富或者在创设的时候被内联/复制/重命名,
所以它们从实质上来说是您源码的一部分。那就是干什么大家提议将交由webpack处理的静态财富和其他源文件壹律坐落/src路径下边。实际上,你甚至不需求把它们统统放在/src/assets路径下:你能够依照模块/组件的利用来协会文件结构。例如,你能够把每种组件和属于它的静态财富放在它和谐的目录下。

您只怕会注意到vue-cli与webpack结合的品种中,大家平常会有八个静态能源的不二秘籍:src/assets和static/,他们相互的区分是什么样呢?本文主要和豪门介绍了vue-cli与webpack结合怎么样处理静态能源,小编觉得挺不错的,未来分享给大家,也给大家做个参考。一起跟小说者过来看看啊,希望能支援到我们。

不过因为logo.png并不是JavaScript,所以要是被当成二个重视的花,大家供给经过url-loader和file-loader来分析它。这一个模板已经为你安顿了对应的loader,所以您见惯司空并非担心绝对路径的安插难点。

财富处理规则

装进的财富

即便那几个财富有十分大希望在构建过程中被内联/拷贝/重命名,他们也是源码首要组成都部队分。那正是为何大家提议单独在/src文件夹里放置静态财富,就像是其余的财富文件夹。

相持U途胜L, e.g. ./assets/logo.png
将会被解说成四个模块依赖。它们会被1个依据你的Webpack输出配置自动生成的U汉兰达L替代。未有前缀的U本田UR-VL,
e.g. assets/logo.png 将会被看作相对UWranglerL,并且转换来./assets/logo.png

为了应对那一个标题,大家率先要驾驭Webpack是什么处理静态能源的。在*.vue组件里,所有的templates和CSS模块都被vue-html-loader和css-loader解析来寻找路径UHavalL。

实在,你都不要把他们全放在/src/assets,你能够根据模块/组件来协会使用他们。比如说,你能够把任一组件放到他们友善的目录,并在该目录下存放静态能源。

前缀带~的ULX570L 会被当成模块请求, 类似于require(‘some-module/image.png’).
如若你想要利用Webpack的模块处理配置,就足以行使那几个前缀。例如,假如你有3个对于assets的路子解析,你需求选择<img src=”~assets/logo.png”>
来确定保障解析是对应上的。相对根目录的U奇骏L, e.g. /assets/logo.png
是不会被处理的

举个例证,在<img src"./logo.png">和背景background: url(./logo.png),”./logo.png”是多个相对路径,会被Webpack当做1个借助加载。

能源引入规则

在 Javascript中拿走能源路径

但是因为logo.png并不是JavaScript,所以一旦被当成三个凭借的花,我们必要通过url-loader和file-loader来分析它。那么些模板已经为您安插了对应的loader,所以您平凡并非操心相对路径的配备难题。

相对路径,比如
./assets/logo.png会被解析成模块信赖。它们会被三个基于你Webpack输出配置的自动生成U奇骏L替代。

为了能让Webpack重返正确的财富路径,你要求运用require(‘./relative/path/to/file.jpg’),由file-loader实行辨析,然后回来处理过的U揽胜L。例如:

4858美高梅,不怕那个能源有极大也许在构建进度中被内联/拷贝/重命名,他们也是源码首要组成都部队分。那正是为什么大家建议单独在/src文件夹里放置静态财富,如同别的的能源文件夹。

未有前缀的路线,比如assets/logo.png,同相对路径,转义成./assets/logo.png

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

实在,你都不要把她们全放在/src/assets,你能够依照模块/组件来组织使用他们。比如说,你能够把任一组件放到他们协调的目录,并在该目录下存放静态能源。

有~前缀的路径。
~被认为是一个模块请求,同require(‘some-module/image.png’)。根路径,比如/assets/log.png

注意上边的例子,在最终的营造时将会包括./bgs/路径下的具备图片
那是因为Webpack不能够猜出来在运营时会用到中间的哪位,所以会含有全数的。

财富引入规则

在JavaScript获得能源路径

“真实的” 静态能源

相对路径,比如
./assets/logo.png会被分析成模块信赖。它们会被三个基于你Webpack输出配置的自动生成U索罗德L替代。

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

作为相比较,在static/下的文本都不会被Webpack处理:它们接纳同一的文件名,直接拷贝到最后的门道。你无法不运用相对路径来引用那么些文件,取决于在config.js里面参加的build.assetsPublicPath
和 build.assetsSubDirectory。

未有前缀的门径,比如assets/logo.png,同相对路径,转义成./assets/logo.png

其一能源路径同样会被file-loader处理然后回来处理后的路子。而且Webpack会二次性加载该bgs目录下的兼具图片。

举个例子,上边包车型客车私下认可值是:

有~前缀的门道。
~被认为是二个模块请求,同require('some-module/image.png')。根路径,比如/assets/log.png

“真实的”静态能源

// config/index.js
module.exports = {
 // ...
 build: {
  assetsPublicPath: '/',
  assetsSubDirectory: 'static'
 }
}

在JavaScript获得能源路径

与此绝对的,static/中的文件全都不会被Webpack处理。它们将被直接拷贝到目的文件夹,引用那几个文件需求运用相对路径。

持有放在
static/目录下的文本都应该是利用相对化UENCOREL/static/[filename]引用的。假若你将assetSubDirectory的值改成assets,
那么那几个U科雷傲L就会被改为 /assets/[filename]

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

上述正是本文的全体内容,希望对大家的读书抱有支持,也可望大家多多支持脚本之家。

如上就是本文的全体内容,希望对大家的读书抱有援救,也指望我们多多支持脚本之家。

其一能源路径同样会被file-loader处理然后回随处理后的路子。而且Webpack会2回性加载该bgs目录下的具有图片。

您大概感兴趣的小说:

  • 详解vue静态财富打包中的坑与化解方案

你大概感兴趣的稿子:

  • 浅谈vue中改elementUI暗许样式引发的static与assets的分歧

“真实的”静态财富

与此相对的,static/中的文件全都不会被Webpack处理。它们将被一向拷贝到目的文件夹,引用那一个文件要求选拔相对路径。

总结

如上所述是我给大家介绍的vue-cli与webpack处理静态财富的点子及webpack打包的坑,希望对大家持有帮忙,假若咱们有其余疑问请给自个儿留言,我会及时还原我们的。在此也分外感激大家对剧本之家网址的辅助!

您大概感兴趣的文章:

  • 浅谈在vue中用webpack打包之后运营文件的题材以及有关配置格局
  • 缓解vue+webpack打包路径的题材
  • Vue项目webpack打包布置到汤姆cat刷新报404错误难题的化解方案
  • vue和webpack打包项目相对路径修改的方法
  • 详解如何运用webpack打包Vue工程
  • vue解决选择webpack打包后keep-alive不奏效的诀窍

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有