vue2.0 资源文件assets和static的区别

资源文件处理

在我们的项目结构里,有两个资源文件的路径,分别是:src/assets 和 static/。那这两个到底有什么区别呢?

Webpacked 资源

为了回答这个问题,我们首先需要理解webpack是怎样处理静态资源的。在*.vue组件中,所有的templates和css都会被vue-html-loader 和 css-loader解析,寻找资源的URL。

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

由于logo.png不是JavaScript,当被看成一个模块依赖的时候,我们需要使用url-loader 和 file-loader进行处理。 该模板已经配置好了这些loaders,所以你能够使用相对/模块路径时不需要担心部署的问题。

由于这些资源可能在构建的时候被内联/复制/重命名, 所以它们从本质上来说是你源码的一部分。这就是为什么我们建议将交由webpack处理的静态资源和其它源文件一样放在/src路径下面。

实际上,你甚至不需要把它们全都放在/src/assets路径下:你可以基于模块/组件的使用来组织文件结构。例如,你可以把每个组件和属于它的静态资源放在它自己的目录下。

资源处理规则

  • 相对URL, e.g. ./assets/logo.png 将会被解释成一个模块依赖。它们会被一个基于你的Webpack输出配置自动生成的URL替代。
  • 没有前缀的URL, e.g. assets/logo.png 将会被看成相对URL,并且转换成./assets/logo.png
  • 前缀带~的URL 会被当成模块请求, 类似于require(‘some-module/image.png‘). 如果你想要利用Webpack的模块处理配置,就可以使用这个前缀。例如,如果你有一个对于assets的路径解析,你需要使用<img src="~assets/logo.png">来确保解析是对应上的。
  • 相对根目录的URL, e.g. /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/[filename]引用的。如果你将assetSubDirectory的值改成assets, 那么这些URL就会被变成 /assets/[filename]

时间: 2024-10-09 17:08:28

vue2.0 资源文件assets和static的区别的相关文章

vue中assets和static的区别

Vue中assets和static的区别 再一次框架定型中,与同事在静态资源的存放上有了一些分歧,后来经过查阅总结如下: 相同点: assets和static两个都是存放静态资源文件.项目中所需要的资源文件图片,字体图标,样式文件等都可以放在这两个文件下,这是相同点 不相同点: assets中存放的静态资源文件在项目打包时,也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传,所谓打包简单点可以理解为压缩体积,代码格式化.而压缩后的静态资源文件最终也都会放置在s

资源文件assets和 res下面raw文件的使用不同点

在建立项目中一般会默认建立assets文件,当然我们还可以在res文件下面建立raw文件夹,这里面都可以存放一些图片,音频或者文本信息,可以供我们在程序当中进行使用,不过他们两个也有不同点: assets下面的文件不会被编译,通过路径可以去访问其中的内容.raw中文件会自动编译,我们可以在R.java文件中找到对应的ID, 看下面截图: 那么既然这样那我们平时该怎么样进行把资源放入这两个文件当中呢? 我个人平时喜欢比较文件的大小,如果文件比较大一点的会放入到aeests文件中,因为用这个文件文件

用webpack2.0构建vue2.0单文件组件超级详细精简实例

npm init -y 初始化项目  //-y 为自动生成package.json,如果需要自行配置,去掉-y即可 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack webpack-dev-server 安装webpack以及webpack测试服务器 //默认安装最新版2.x版本 npm install --save-dev babel-core babel-loader babel-preset-es2

android资源目录---assets与res/raw区别

android资源目录---assets与res/raw的不同 Android 2011-05-24 14:40:21 阅读20 评论0   字号:大中小 订阅 assets:用于存放需要打包到应用程序的静态文件,以便部署到设备中.与res/raw不同点在于,ASSETS支持任意深度的子目录.这些文件不会生成任何资源ID,必须使用/assets开始(不包含它)的相对路径名. res:用于存放应用程序的资源(如图标.GUI布局等),将被打包到编译后的Java中.不支持深度子目录 res/menu:

vue 项目中assets 和static的区别

一.Webpacked Assets 为了回答这个问题,我们首先需要了解Webpack如何处理静态资产.在 *.vue 组件中,所有模板和CSS都会被 vue-html-loader 及 css-loader 解析,并查找资源URL.例如,在 <img src="./logo.png">和 background: url(./logo.png) 中,"./logo.png" 是相对的资源路径,将由Webpack解析为模块依赖. 因为 logo.png 不

vue2.0版本指令v-if与v-show的区别

v-if: 判断是否加载,可以减轻服务器的压力,在需要时加载. v-show:调整css dispaly属性,可以使客户端操作更加流畅. v-if示例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue2.2.js"></script> </he

vue引入assets和static静态资源问题

1.assets文件夹与static文件夹的区别 assets文件是src下的,所以最后运行时需要进行打包,一般用来存放自己用到的静态资源: static文件不需要打包就直接放在最终的文件中了,一般用来存放第三方静态资源. 引入静态资源方法:js中用import,css中用@import url(...) ,index.html中用link(script)标签引入. 利用vue-cli脚手架搭建的webpack对各种文件的编译一般是配置好的. 2.遇到的问题 第一次使用vue构建工具做项目,业余

Android学习--Assets资源文件读取及AssetManager介绍

APK安装过程 复制APK安装包到data/app目录下,解压并扫描安装包,把dex文件(Dalvik字节码)保存到dalvik-cache目录,并data/data目录下创建对应的应用数据目录,Android系统在sdcard上为每一个应用分配了存储路径:/sdcard/Android/data/$(应用的包路径),该路径可以通过 context.getExternalFilesDir 得到,一般应用卸载的时候,该目录也会随之被删除. Android资源文件分为两类: 第一种是res目录下存放

assets文件夹与static文件夹的区别

assets文件夹与static文件夹的区别原地址==>https://www.cnblogs.com/x123811/p/9230700.html 相同点===>assets文件夹和static文件夹在vue-cli生成的项目中,都是用来存放静态资源的.不同点===>assets目录中的文件会被webpack处理解析为模块依赖,[只支持相对路径形式].build的时候由Webpack解析为模块依赖. static/ 目录下的文件并不会被Webpack处理:它们会直接被复制到最终的打包目