static和assets的区别,原理就在于webpack是如何处理静态资源的

assets

1)在vue组件中,所有模板和css都会被vue-html-loader和css-loader解析,并查找资源url。

例:<img src="./logo.png" />  或者  background: url("./logo.png")

  因为./logo.png是相对的资源路径,将会由webpack解析为模块依赖;

2)由于logo.png不是js,当被视作模块依赖时,需要使用url-loader和file-loader处理它,vue-cli已经配好了这些loader(webpack)因此可以使用相对/模块路径。

3)由于这些资源可能在构建过程中被内联、复制、重命名,所以它们基本是代码的一部分,即webpack处理的静态资源放在/src目录中,和其它资源文件放在一起。

事实上,不必把它们全部放在/src/assets文件下,可以使用"模块/组件"的组织方式来使用它们

例:可以在每个放置组件的目录中存放静态资源。

static

1)static目录下的文件并不会被webpack处理,它们会直接复制到最终目录(dist/static)下。

   必须使用绝对路径引用这些文件,这是通过在config.js的build.assetsPublicPath和nuild.assetsSubDirectory连接确定的。

2)任何放在static/的文件需要以绝对路径形式引用:/static/[name]。

如果更改assetsSubDirectory的值为assets,那么路径需更改为:/assets/[filename]。

总结

assets里面的资源会被webpack打包进代码,static里面的资源就直接引用了;

一般在static里放一些类库的文件,assets放属于项目的资源文件。

说的再通俗一点,就是static放别人家的资源,assets放自己家的资源。

vue static和assets的区别的更多相关文章

  1. static和assets的区别

    assets和static两个都是用于存放静态资源文件. 放在static中的文件不会进行构建编译处理,也就不会压缩体积,在打包时效率会更高,但体积更大在服务器中就会占据更大的空间 放在assets中 ...

  2. vue 项目中assets 和static的区别

    一.Webpacked Assets 为了回答这个问题,我们首先需要了解Webpack如何处理静态资产.在 *.vue 组件中,所有模板和CSS都会被 vue-html-loader 及 css-lo ...

  3. vue-cli中自定义路径别名 assets和static文件夹的区别

    转自:vue-cli中自定义路径别名 assets和static文件夹的区别 静态资源处理: assets和static文件夹的区别 相信有很多人知道vue-cli有两个放置静态资源的地方,分别是sr ...

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

    assets文件夹与static文件夹的区别原地址==>https://www.cnblogs.com/x123811/p/9230700.html 相同点===>assets文件夹和st ...

  5. c#中const、static、readonly的区别

    1. const与readonly const ,其修饰的字段只能在自身声明时初始化. Readonly 是只读变量,属于运行时变量,可以在类初始化的时候改变它的值.该类型的字段,可以在声明或构造函数 ...

  6. 全局变量,extern和static以及命名空间的区别

    全局变量,extern和static以及命名空间的区别        全局变量只是在声明它的文件中有效,假如在另一个文件中声明定义了一个相同名称的全局变量,则在后续使用这两个变量的时候会产生名字上的冲 ...

  7. IOS 成员变量,全局变量,局部变量定义,static与extern的区别

    IOS 成员变量,全局变量,局部变量定义,static与extern的区别 1,先说定义 1)成员变量定义:生存与该类的生命周期,变量存活周期跟你定义的该类实体对象一样:作用域是整个实体对象:可以在h ...

  8. static和final的区别(转载)

    Java中static 和final的区别 final定义的变量可以看做一个常量,不能被改变: final定义的方法不能被覆盖: final定义的类不能被继承. final static 就是再加上s ...

  9. PHP 面向对象 static 和 self 的区别

    一.前言 php是世界上最好的语言 php从面向过程走到现在成熟的面向对象体系, 在php面向对象中,静态变量的调用我们可以用这两个self::method和 static::method, 但是很多 ...

随机推荐

  1. SQL的子查询与JOIN的小试牛刀

    //学生表CREATE TABLE student( ID INT PRIMARY KEY, s_name ) NOT NULL, class_id INT NOT NULL); , "qf ...

  2. mui使用总结

    mui是一个高性能的HTML5开发框架,从UI到效率,都在极力追求原生体验:这个框架自身有一些规则,刚接触的同学不很熟悉,特总结本文:想了解mui更详细的信息,请访问mui官网 DOM结构 关于mui ...

  3. 【InnoDB】缓冲池

    索引目录 INNODB的体系结构 缓冲池 缓存中页的定位: checkpoint技术 INNODB的关键特性 插入缓冲 change buffer 两次写 以下的资料总结自:官方文档和<MySQ ...

  4. Java中的小知识。

    package jicheng; public class Animal { //定义一个成员变量name. private String name; public String getName() ...

  5. CKEditor的使用经历总结

    关于ckeditor的下载和引用网上有很多完整清晰的教程,就不在此多说了,主要说一些小问题. 这个插件,初次用的时候放不进背景图,放不进隐藏域,连class,id这些属性都放不进去,然后我进行了一些调 ...

  6. 20175223 MySQL

    目录 完成结果 要求 1 :导入world.sql 要求 2 :CityWanna.java CityWanna.java 要求 3 :CountryWanna.java CountryWanna.j ...

  7. JQuery Mobile 图片布局

    JQuery Mobile 图片布局 1.实现效果

  8. 使用 twine 上传自己的 python 包到 pypi

    打包检查 python setup.py check 打包 python3 setup.py sdist build 上传 twine upload dist/* twine 安装: pip inst ...

  9. python学习笔记:通配符之glob模块(过滤)

    glob模块用来查找文件目录和文件,可以和常用的find功能进行类比.glob支持*?[]这三种通配符.返回的数据类型是list.常见的两个方法有glob.glob()和glob.iglob(),ig ...

  10. 点读系列《流畅的python》

    第1章 python数据模型 python的写法是由背后的魔法方法实现的,比如obj[key],解释器实际调用的是obj.__getitem__(key) 作者把魔法方法叫做双下方法,因为有两个下划线 ...