Vue项目中的ASS用途和操作_字体_使用自动化工具优化资源管理

Vue项目中的ASSETS文件夹:了解其用途和操作


一、ASSETS文件夹的用途

在Vue项目中,assets文件夹就像是个资源宝库,专门用来存放各种静态资源。这包括我们常见的图片、字体、图标和样式文件(比如CSS、SASS、LESS等)。把这些资源都集中在一个地方,不仅让我们的项目看起来更有条理,而且方便管理和使用。


二、引用静态资源的方法

想要用上这些静态资源,方法有好几种:

方法 示例
相对路径引用 src="image.png"
绝对路径引用 src="/assets/image.png"
通过JavaScript模块引用 import image from '@/assets/image.png'

三、构建和打包时的优化

Vue项目在构建和打包时,会自动优化assets文件夹中的资源:


四、实例说明

假设我们有一个项目叫my-project,assets文件夹里有各种资源。在MyComponent.vue中,可以这样引用这些资源: