Vue引入资源打包后丢失

Missing assets after build on Vue

在Vue中使用以下方式引入资源, 开发环境显示正常, 打包后可能会丢失. Vite默认会将小文件内联, 这是导致这种现象的原因之一.

Import assets as folows on Vue, and some of assets may missing after build, but dev environment is fine. One of the reason why it happen because Vite inline small files by default to improve perfomance.

<script setup>
import example from "@/assets/scroller/example.svg"
</script>

<template>
  <div :style="{backgroundImage: `url(${example})` }"> </div>
</template>

解决方式就是不让Vite内联

Solution: no inline

// vite.config.js

// https://vitejs.dev/config/
export default defineConfig({
    build: {
        assetsInlineLimit: 0,
    },
})