详解Vue-cli中的静态资源管理(src/assets和static/的区别)

你可能注意到了我们的静态资源共有两个目录src/assets和static/,你们它们之间有怎样的区别呢?

资源打包

为了回答这个问题,我们需要了解webpack是如何处理静态资源的。在所有的*.vue文件中你所有的templates 和CSS 都被vue-html-loader 和css-loader 查询资源的URLs解析. 比如说, 在 img src=”./logo.png” 和background: url(./logo.png) 中./logo.png是一个相对资源路径,并且会被Webpack视为一个模块依赖来解析。

因为./logo.png并非一个Javascript,当将它作为模块依赖对待时,我们需要用url-loader和file-loader去处理它。这种公式化处理早已经为你配置了loader,所以你基本上可以获得诸如文件名指纹和有条件的内嵌base64,因此你能够使用相对/模块路径而不必担心部署问题。

自从这些资源可以在build期间被内联/复制/重命名,它们本质上来讲是你资源代码的一部分。这就是为什么它们被推荐用于延源资源替换Webpack-processed的内部/src资源。事实上,你甚至不必将它们放进/src/assets:你可以基于模块/组件去组织它们并使用,你可以将每一个组件放进他们自己的文件夹,随着它的静态文件正确的紧挨着它。

资源决定规则

  1. 相对URLs, 例如 ./assets/logo.png 将会被解释为一个模块依赖. 它们将会被替换为基于你Webpack输出配置自动生成的 URL
  2. 无前缀URLs, 例如. assets/logo.png 将会被像相对URLs一样处理并将被转化为 ./assets/logo.png.
  3. 带~前缀的URLs 将会被看做模块请求, 类似于请求(‘some-module/image.png'). 如果你想改变Webpack的模块解决配置你需要使用这个前缀 。例如,你需要处理资源的别名,你需要使用 ~assets/logo.png去确保这个别名时受到重视的.
  4. 特权相对URLs, 例如 /assets/logo.png 是完全不作处理的.

在Javascript中获取资源路径

为了使Webpack可以正确返回资源路径, 你需要使用 require(‘./relative/path/to/file.jpg'), 它将会被file-loader处理 and returns并返回处理过的URL. 例如:

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

注意上例将会包含每个在最后一次build中的./bgs/ 下的图片。 这是由于 Webpack 无法推测它们哪个会在运行时被使用, 因此会包含所有图片.

“真正”的静态资源

对比而言, static/ 中的文件是完全不被Webpack处理的,它们被以相同的文件名直接被复制进最终目标as-is.你务必要使用绝对路径去引用它们.这是由config.js加入build.assetspublicpath和build.assetssubdirectory确定。

如下是一个含默认值得例子:

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

任何在 static/ 中的文件都需要被使用绝对路径 /static/[filename]来引用. 如果你改变assetSubDirectory 为assets, 那么这些 URLs将需要被替换为 /assets/[filename].

译自:http://vuejs-templates.github.io/webpack/static.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android复制assets文件到SD卡

    前言 最近接到一个js文件缓存任务,即通过拦截我们webView的url,首先从文件加载js文件,文件里没有的话就去assets里面Copy过来.感觉这个工具类挺有用的,所以先发上来供大家参考.稍后有时间会把整个项目思路写出来. 项目代码 public class CopyAssetsToSd { final ThreadPoolExecutor threadPoolExecutor = new ThreadPoolExecutor(1, 2, 1, TimeUnit.SECONDS, new

  • Android实现复制Assets文件到SD卡

    Assets文件介绍 assets文件夹里面的文件都是保持原始的文件格式,需要用AssetManager以字节流的形式读取文件. 1. 先在Activity里面调用getAssets() 来获取AssetManager引用. 2. 再用AssetManager的open(String fileName, int accessMode) 方法则指定读取的文件以及访问模式就能得到输入流InputStream. 3. 然后就是用已经open file 的inputStream读取文件,读取完成后记得i

  • android读取assets中Excel表格并显示

    本文实例为大家分享了android读取assets中Excel的具体代码,供大家参考,具体内容如下 1.在assets下放的excel表格,命名为excel.xls 2.添加读取excel需要的jar包"jxl.jar",assets是建在main级别目录下,建错地方找不到文件 3.读取excel中的文件 /*获取excel表格中的数据不能在主线程中调用 xlsName 为表格的名称 index 表示第几张表格 */ public ArrayList<ExcelBean>

  • Android获取其他应用中的assets资源

    最近有这样一个需求:A应用在一定条件下出发某个逻辑后,需要从B应用中获取一些资源(assets下的mp4视频.还有drawable下的一些图片用作背景),具体需求就不说啦哈哈,用一张图来表示应该更明白: A和B应用其实是1对多的关系,不同的B应用需要从他们自己的地方获取到资源给A. 一般我们获取app内的资源肯定是要获取到Resource这个类,而Resource是通过Context类的getResource获取到了,所以我们只需要获取到B应用的Context类就可以了. 可是其他App的Con

  • 详解vue2.0 资源文件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不是JavaS

  • iOS开发之AssetsLibrary框架使用详解

    一.引言 AssetsLibrary框架是专门用来操作相册相关资源的一个框架,其是iOS4到iOS9之间常使用的一个框架,在iOS9之后,系统系统了Photos框架代替了AssetsLibrary框架,但是AssetsLibrary框架依然可以使用,并且其结构和设计思路依然值得我们进行分析学习. 二.概述 AssetsLibrary框架会操作系统的相册,因此首先需要进行权限的申请,在使用之前,首先需要在Info.plist文件中添加如下键值: Privacy - Photo Library Us

  • Android开发实现读取Assets下文件及文件写入存储卡的方法

    本文实例讲述了Android开发实现读取Assets下文件及文件写入存储卡的方法.分享给大家供大家参考,具体如下: 调用一个反编译的.so文件,查看起加密和解密情况,需要解析上万的数组,而so文件加密解密都是通过Byte来进行,又需要把String字符串转化为 Byte,当把数据直接写在代码中就会提示多Byte数组过大.最后把数组写到Assets文件加下,读取txt文本文件. 读取Assets方法如下: public String getFromAssets(String fileName) {

  • Android加载Assets目录中Xml布局文件

    最近由于项目开发使用到了动态布局,因为打包sdk ,sdk 这块activity 需要一些layout 文件 .而做过sdk 开发的小伙伴应该知道,layout 文件是不能打包到jar 中的.当然了aar 除外.由于项目使用的还是jar包,所以怎么解决layout文件是个问题,一开始想到的办法就是把layout 文件发给客户.但是这种方法显然不太合适后来就发现了Android 其实提供了一个方法可以加载xml布局文件,就是使用inflate(XmlPullParser parser, ViewG

  • Android studio 添加assets文件夹的方法

    我们知道Eclipse创建的工程默认是有个assets文件夹的,但是Android studio默认没有帮我们创建,那么我们就自己创建一个就好啦. (1)手动创建 在项目的顶部有个下拉,默认选择的是Android, 但是在Android 模式下不能真实反映整个工程的目录结构,所以我们点击它在下拉选项中选择Project,选完之后目录发生了变化 我们找到/src/main,选中main文件夹右键新建一个文件夹,命名为assets,这样就OK了. (2)自动创建 Android studio提供了一

  • 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

随机推荐