vue 图片资源应该如何存放并引入（public、assets）？
全局cli配置：vue.config.js
之前写项目就想着怎么简单怎么来，图片要用了，就直接在要用图片的页面，新建一个跟页面同等级的 imgs 文件夹，然后在页面中直接 “./imgs/图片.png”，不得不说这样写很方便。
但是这样做显得不太高级，而且图片太多的时候，可能会重复添加到项目中。vue-cli3 里面有两个可以存放图片的位置：public、assets，这两个的区别一直分得不是很清楚，今天就整理疏通一下，将了解下面3点：
- 两者存放什么图片，什么时候使用，在某种情况下应该使用哪种方式；
- 使用方式；
- 图片路径转换；
在了解上面几点之前，先来看看官网的介绍：
一、处理静态资源
静态资源可以通过两种方式进行处理：
- 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
- 放置在
public目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。
第一种方式：例如在某个 .vue 文件中通过 import "./" 的方法引入某个组件、js方法，或者像我之前在项目中写的 “./imgs/图片.png”，这就是采用相对路径引用资源的方法。
第二种方式：例如在 public/index.html 中 <link rel="icon" href="<%= BASE_URL %>favicon.ico"> 通过 <%= BASE_URL %> 引用 favicon.icon，这是绝对路径。
两种方式简单来说，一种是相对路径引用静态资源（会被webpack处理），一种是采用绝对路径引用资源（不会被webpack处理）。【这里的资源不局限于图片，还有js、css等都可以属于静态资源】
1.1 相对路径引用/导入资源
当你在 JavaScript、CSS 或
*.vue文件中使用相对路径 (必须以.开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。在其编译过程中，所有诸如<img src="...">、background: url(...)和 CSS@import的资源 URL 都会被解析为一个模块依赖。
根据上面官方的讲解，大概情形在项目中的展示情况：
1.1.1 通过静态路径导入资源时，例如导入图片，我们在模板中使用，需要通过 require 的这种方法去引入：
<img :src="logo" />export default {data(){return {//相对路径不一定都是./，也可能是../，按照图片存放位置来决定logo: require("./imgs/logo.png") }}
}1.1.2 在写背景图样式的时候，就可以像普通 H5 页面一样直接引入：
<template><div><div class="login"></div></div>
</template><style scoped lang="scss">.login{background: url("./imgs/login.png") no-repeat center;}
</style>1.1.3 若是引入动态背景图，写法与1相似
<template><div><div class="login" :style="{backgroundImg: url(loginImg)}"></div></div>
</template><script>export default{data(){return {loginImg: require('./imgs/login.png')}}}
</script><style scoped lang="scss">.login{background-repeat: no-repeat; background-size:100%;}
</style>二、URL转换规则
如果 URL 是一个绝对路径 (例如
/images/foo.png)，它将会被保留不变。如果 URL 以
.开头，它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。如果 URL 以
~开头，其后的任何内容都会作为一个模块请求被解析。这意味着你甚至可以引用 Node 模块中的资源：<img src="~some-npm-package/foo.png">如果 URL 以
@开头，它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向<projectRoot>/src的别名@。(仅作用于模版中)
三、关于public
3.1 public 文件夹
任何放置在
public文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。注意我们推荐将资源作为你的模块依赖图的一部分导入，这样它们会通过 webpack 的处理并获得如下好处：
- 脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。
- 文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。
- 最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本。
public目录提供的是一个应急手段，当你通过绝对路径引用它时，留意应用将会部署到哪里。如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀：
在
public/index.html或其它通过html-webpack-plugin用作模板的 HTML 文件中，你需要通过<%= BASE_URL %>设置链接前缀：<link rel="icon" href="<%= BASE_URL %>favicon.ico">在模板中，你首先需要向你的组件传入基础 URL：
data () {return {publicPath: process.env.BASE_URL} }然后：
<img :src="`${publicPath}my-image.png`">
3.2 何时使用 public 文件夹
- 你需要在构建输出中指定一个文件的名字。
- 你有上千个图片，需要动态引用它们的路径。
- 有些库可能和 webpack 不兼容，这时你除了将其用一个独立的
<script>标签引入没有别的选择。
上面官方说的大部分都是 public 的内容。
四、总结
public放不会变动的文件（相当于vue-cli2.x中的static）
public/ 目录下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这个取决于你vue.config.js中 publicPath 的配置，默认的是/。
assets放可能会变动的文件
assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。
简单来说就是就是public放别人家js文件（也就是不会变动），assets放自己写的js、css文件（需要改动的文件）
推荐一篇文，个人认为很实用：
Vue处理静态资源：public、assets目录 - vickylinj - 博客园前言: webpack中的require解析 首先明确一点，在项目中的webpack.config.js等项目配置文件中使用的require属于nodejs范畴，而进入index.js后，加载的组件中https://www.cnblogs.com/vickylinj/p/15599154.html
vue项目引入背景图报Module not found: Error: Can't resolve './src/assets/theme/logo_blue.png' in'xxx'错误
vue 图片资源应该如何存放并引入（public、assets）？相关推荐
- Vue项目中的静态资源引入
Vue项目中的静态资源引入 assets和static assets 静态资源访问static assets和static assets assets在src文件夹下面,src里面的文件是参与打包的, ...
- vue中打包报错Multiple chunks emit assets to the same filename static/js/chunk-6c337256.33476c81.js
引了几个bpmn的包,导致Jenkins部署报错,找原因一直以为是引入的包有问题,后来发现是在打包的过程中会对生成的文件切割导致文件名重复了,在vue.config.js中配置以下配置完美解决,之前我 ...
- vue组件中引入public文件，build打包后找不到资源报错404
在组件中我使用object标签预览pdf文件 <object width="100%" height="100%" data="/help/he ...
- Vue如何在data中正确引入图片路径
方法一:将图片资源放入项目 /static 目录下,使用绝对或相对路径引用即可 // 文件结构 |-- src | |-- components | | |-- banner.vue |-- stat ...
- 单个vue组件的打包和动态引入
目录 一.原理简介 二.打包过程 1. 创建一个webpack项目 2. 编写组件和打包脚本 3. 打包 三.动态引入 1. 在vue项目中使用 2. 在普通项目中使用 总结 一.原理简介 在使用we ...
- Tinymce富文本编辑器在vue项目中的使用；引入第三方插件和上传视频、图片等
先放张效果图 第一步:安装依赖 npm install tinymce@5.0.12 第二步:在项目中的public文件夹中新建tinymce文件夹(因为我的项目是脚手架创建的,所以公共文件夹是pub ...
- vue项目 在style标签中引入css,less,sass的方法
vue项目 style标签引入 less sass less和sass需要安装相应的依赖 package.json 中加上 并再次npm install 重启项目 "less": ...
- js 获取vue组件html_vue.js中怎么引入组件？
前端框架vue,在利用脚手架工具vue-cli创建前端项目时候,怎么引入组件呢?下面本篇文章给大家介绍一下引入子组件的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. vue.j ...
- vue传中文标点_vue项目引入第三方高德地图实现标点定位
vue项目中,高德地图使用. 引入vue中.异步导入vue中. gaoDe(key) { window.onApiLoaded = function () { var map = new AMap.M ...
最新文章
- 关于自动驾驶，我们是否在刻意回避这三大关键问题？
- Apache solr(二).
- 《Java程序设计》实验报告——Java的基本程序设计结构
- C++读取numpy数据二进制文件
- ROS基本概念 文件系统 创建ROS软件包 ROS中的一些命令
- Eclipse 编码区-保护色-快捷大全
- keil4怎么移植其他人的程序_关节炎怎么治疗效果才会好？
- 研究Warehousing Management
- python sys模块 argv用法_python中sys模块的argv
- 揭秘盒马鲜生，如何打破收益增长天花板！
- 【实物】端到端自动驾驶搭建教程（一）附完整资料
- Java操作文件夹的工具类
- 循环神经（LSTM）网络学习总结
- 微软更新iOS版Skype：新增@功能，一键召唤好友
- 高等数学中的求极限公式
- java后台生成内嵌logo的二维码图片以及添加文字
- 玩转openpyxl，用python制作一个公司租车记录登记表！
- 【化学信息学|机器学习】分子亲和力（Kd,Ki,IC50)
- 什么软件可以把真人照片卡通化、动漫化？
- 用户态和内核态的切换耗费时间的原因