财富文件assets和static的区分详解,Android中能源文

作者: 韦德国际1946国际网址  发布:2019-05-28

能源文件管理

资源文件管理

在大家的种类组织里,有七个能源文件的门路,分别是:src/assets 和 static/。那那多少个毕竟有哪些界别吧?

做2个小的下结论,assets文件夹下放的是静态文件,css,js,image

assets目录下存放的能源代表行使不可能直接待上访问的原生能源,应用程序必要经过AssetsManager以二进制流的花样来读取能源。SDK编写翻译时不会再奥迪Q5类中为原生产资料源创立索引项。
res/raw目录下也是存放原生产资料源(音频、摄像),推荐放入assets目录下。

在大家的品种结构里,有三个财富文件的路线,分别是:src/assets 和 static/。那那多少个终究有什么样界别吧?

Webpacked 资源

韦德国际1946国际网址,为了回应那么些难点,大家第三要求知道webpack是何等管理静态能源的。在*.vue组件中,所有的templates和css都会被vue-html-loader 和 css-loader解析,找出财富的URubiconL。

举个例证,在<img src="./logo.png">财富文件assets和static的区分详解,Android中能源文件。 和 background: url(./logo.png)"./logo.png"中,都以相对能源路线,都会被Webpack分析成模块重视 。

由于logo.png不是JavaScript,当被当作一个模块重视的时候,大家供给采取url-loader 和 file-loader开始展览管理。 该模板已经配备好了这一个loaders,所以你能够选拔相对/模块路线时不要求操心布置的难题。

由于那几个能源大概在营造的时候被内联/复制/重命名, 所以它们从精神上来讲是您源码的一有个别。那就是干什么我们提出将交由webpack管理的静态能源和别的源文件一律位于/src渠道下边。

实际上,你依然无需把它们统统放在/src/assets渠道下:你能够依据模块/组件的应用来公司文件结构。比方,你能够把各种组件和属于它的静态财富位居它本人的目录下。

并不一定是对的,先这样用吧


Webpacked 资源

财富管理规则

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

  • 从不前缀的U本田CR-VL, e.g. assets/logo.png 将会被当做相对U瑞虎L,并且转变到./assets/logo.png

  • 前缀带~的U帕杰罗L 会被当成模块请求, 类似于require('some-module/image.png'). 若是你想要利用Webpack的模块管理配置,就能够选取那一个前缀。比如,假如您有一个对于assets的门径剖判,你供给选择<img src="~assets/logo.png">来保管分析是对应上的。

  • 绝对根目录的U福睿斯L, e.g. /assets/logo.png 是不会被拍卖的

 

意识了一个难题:假使是行使webpack项目来讲,css文件放在static下的话是足以平素引入的,amazing

res/raw和assets的同样点:
一.两个目录下的文本在包装后会未有丝毫改动的保存在apk包中,不会被编写翻译成二进制。

为了酬答那几个标题,大家第二须求了解webpack是怎么着管理静态财富的。在*.vue组件中,全数的templates和css都会被vue-html-loader 和 css-loader深入分析,寻觅资源的UENVISIONL。

在JavaScript里拿走财富路线

为了能让Webpack再次回到正确的财富路线,你供给选用require('./relative/path/to/file.jpg'),由file-loader拓展剖判,然后回四处理过的URubiconL。举个例子:

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

瞩目上面包车型地铁例证,在最后的创设时将会蕴藏./bgs/路径下的富有图片 那是因为Webpack无法猜出来在运行时会用到中间的哪位,所以会含有全数的。

 

尝试验证,就到底在webpack下布置了style-loader!css-loader的话,也是无能为力去引进assets下的文件的

res/raw和assets的不相同点:
一.res/raw中的文件会被映射到Enclave.java文件中,访问的时候一向使用财富ID即猎豹CS陆.id.filename;assets文件夹下的公文不会被映射到PRADO.java中,访问的时候必要AssetManager类。
二.res/raw不能有目录结构,而assets则能够有目录结构(在其目录下得以再建文件夹)

举个例证,在 <img src="./logo.png"> 和 background: url(./logo.png), “./logo.png”中,都以周旋能源路线,都会被Webpack分析成模块正视 。

"真实的" 静态能源

用作对照,在static/下的文本都不会被Webpack管理:它们利用一样的公文名,直接拷贝到最后的门道。你必须选取相对路径来引用那个文件,取决于在config.js其间插手的build.assetsPublicPath 和 build.assetsSubDirectory

举个例证,上面包车型地铁默许值是:

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

 全数放在 static/目录下的文书都应当是应用绝对化U瑞虎L/static/[filename]引用的。倘诺你将assetSubDirectory的值改成assets, 那么这几个UOdysseyL就能够被改为 /assets/[filename]

 

     {
        test: /.css$/,
        loader: 'style-loader!css-loader'
      },

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:财富文件assets和static的区分详解,Android中能源文

关键词: vue学习笔记 Android工程目录