Vite - assetsInlineLimit属性

   起因：

       Vite项目在打包后，线上环境下部分图片的路径转变为了Base64，本文详细的复现了过程和解决方法以及原因。

   复现过程：

       1. 在新项目中引用了三张图片(详见图一)，此三张图均放置于src/assets目录下。

       图一：

         2. 在生产模式下，F12查看源码可以看img的src均为对应路径(详见图二)

           图二：

       3. 打包后，在dist目录下运行serve指令，创建一个静态服务器，运行当前文件，模拟线上环境，此时F12查看源码，发现第一个img和第三个img的路径变成了Base64格式。(详见图三)

# 如果你没有安装serve模块则需要全局先行安装后再运行
npm install -g serve

       图三：

   原因：

      Vite脚手架的默认的优化项“assetsInlineLimit“有关，它的作用是小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求，它的默认值是4096即4kb，换句话说就是小于4K的图片都会被编码成Base64，知道了病因所在，那么它的解决办法也很简单了。

   解决方法：

       在vite.config.ts或js中，配置如下信息。

       第一种将“assetsInlineLimit“设置为0，所有图片都不会再压缩，第二种将“assetsInlineLimit“设置为理想状态下的阈值，那么只有小于该阈值的图片才会被转换，具体内容详看此处 Vite文档。

export default defineConfig({
  plugins: [vue()],
  build: {
    assetsInlineLimit: 0
  }
})