侧边栏壁纸
  • 累计撰写 22 篇文章
  • 累计创建 25 个标签
  • 累计收到 2 条评论

目 录CONTENT

文章目录

Vue引入资源打包后丢失

Yttrium
2024-06-11 / 0 评论 / 0 点赞 / 4 阅读 / 1045 字

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,
    },
})

0

评论区