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