vue-cli图片资源存放位置

vue-cli3.0有两个放置静态资源的目录分别是public和assets。

1. public文件夹 - 引用(以/开头)

background-image: url('/search2.png');

2. assets文件夹 - 引用(./或@/开头)

<img src="@/assets/logo.png" alt="">

1. public放不会变动的文件

public/ 目录下的文件并不会被Webpack处理:它们会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件,这个取决于你vue.config.js中publicPath的配置,默认的是/。public建议放一些外部第三方,自己的文件放在assets,别人的放public中。

2. assets放可能会变动的文件。

assets目录中的文件会被webpack处理解析为模块依赖,只支持相对路径形式。

简单来说就是就是public放别人家js文件(也就是不会变动),assets放自己写的js文件(需要改动文件)若把图片放在assets和public中,html页面都可以使用,但是在动态绑定中,assets路径的图片加载失败(因为webpack使用的是commenJS规范,必须使用require才可以。) 

vue-cli图片和第三方资源放的地方

assets下

将图片和第三方文件放入public文件夹下

1. 图片:所有图片可以放在public文件夹下面 但是不建议

2. jQuery 和 bootstrap

直接在 publix 下的 index.html 直接引入

3. css 文件 / icon 图标 / 动画

以上为个人经验,希望能给大家一个参考,也希望大家多多支持Devmax。

vue-cli中的图片资源存放位置详解的更多相关文章

  1. vue-cli使用stimulsoft.reports.js的详细教程

    Stimulsoft Reports.JS是一个使用JavaScript和HTML5生成报表的平台。它拥有所有拥来设计,编辑和查看报表的必需组件。该报表工具根据开发人员数量授权而不是根据应用程序的用户数量。接下来通过本文给大家介绍vue-cli使用stimulsoft.reports.js的方法,一起看看吧

  2. Java获取Excel中图片所在的行和列坐标位置

    这篇文章主要介绍了Java获取Excel中图片所在的行和列坐标位置,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的朋友可以参考一下

  3. python使用百度或高德地图获取地理位置并转换

    用python处理地理位置是非常常见的需求,下面这篇文章主要给大家介绍了关于python使用百度或高德地图获取地理位置并转换的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

  4. 一篇文章让你彻底搞懂js中的位置计算

    js中有各种与位置相关的属性,每次看到的时候都各种懵逼,索性一次总结一下,这篇文章主要给大家介绍了关于js中位置计算的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

  5. 脚手架(vue-cli)创建Vue项目的超详细过程记录

    用vue-cli脚手架可以快速的构建出一个前端vue框架的项目结构,下面这篇文章主要给大家介绍了关于脚手架(vue-cli)创建Vue项目的超详细过程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

  6. Intellij IDEA如何修改配置文件位置

    这篇文章主要介绍了Intellij IDEA--修改配置文件位置,文章末尾给大家介绍了Intellij IDEA--宏的用法记录操作过程,对此文感兴趣的朋友跟随小编一起看看吧

  7. Angular 利用路由跳转到指定页面的指定位置方法

    今天小编就为大家分享一篇Angular 利用路由跳转到指定页面的指定位置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  8. 使用微信小程序显示用户当前地理位置的详细代码

    这篇文章主要介绍了使用微信小程序显示用户当前地理位置的详细代码,在微信小程序的开发中不可避免的会遇到需要显示用户地理位置的操作,本文将简单介绍如何在微信小程序中显示用户当前的地理位置,需要的朋友可以参考下

  9. SpringBoot使用ip2region获取地理位置信息的方法

    这篇文章主要介绍了SpringBoot使用ip2region获取地理位置信息的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  10. Laravel 修改默认日志文件名称和位置的例子

    今天小编就为大家分享一篇Laravel 修改默认日志文件名称和位置的教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部