Vue 静态资源处理
vue 项目中使用动态的图片链接是较为常见的需求场景，大部分人应该都遇见过动态链接无效的情况。这篇文章就详细介绍 Vite 中静态资源处理方式以及各种引入方法
基于 webpack 打包的项目中静态资源处理方式与 vite 有部分差别，详情请对照vite 文档-静态资源处理与vue-cli 文档-HTML 和静态资源
为什么会有静态资源路径问题
因为项目打包后非 public 文件夹中的静态资源会被打包器处理
例如压缩文件；修改文件名为 hash 值；小尺寸文件直接以base64格式内联在代码中；在vite.config.js中配置了项目基础路径base后，需要拼接上基础路径等。未使用到的静态资源不会被打包，打包后的目录结构也会发生改变
如果用了打包器无法识别的写法，未被正确转换的路径自然会因为路径错误而找不到资源文件
那为什么许多情况下开发环境中能够正常显示呢？以 vite 为例，我们知道 vite 速度快的原因是在开发环境中直接提供文件 ES 模块交由浏览器处理，只需要解析文件为正确的 ES 语法文件，而省略了打包过程的其他的转换步骤，所以开发环境下各文件的位置结构并没有被改变，书写的相对或绝对路径自然能够被正常解析
vite 更详细的介绍以及为什么开发环境与生产环境策略不一致请查看官网-为什么选 Vite
public 目录
通常我们将静态资源文件存储在src/assets文件夹中，但实际上打包器是通过引用查找并处理对应资源的，所以静态资源文件可以存放在项目内任意位置，且未被引用的资源不会被打包
而对于根目录public文件夹(可以通过publicDir配置修改)下的文件则会原封不动的复制到打包后的根目录中，public 只应该放置这些资源：
- 不会被源码引用的资源（例如定义浏览器爬虫爬取规则的 robots.txt）
- 必须保存原有文件名的资源（打包器会将资源文件名做 hash 处理）
- 不需要引入的资源，只为了得到其 URL
注意
- 访问 public 中的资源应该始终通过根路径的方式
/file，其他方式访问将被打包器正常处理 - public 中的资源不应该被 JS 文件引用
引用方式
1.直接使用
在 vue 文件中的 template、style 中正常引用相对路径或/src/assets/xxx 会被解析
- template 中使用 v-bind 绑定变量不会被解析
- script 中使用 import 导入会被解析
- script 中使用 import 函数导入无效