vue.js - 如何在Vue3+Vite+Ts+TailwindCSS项目中正确打包静态资源?

Question

我想做一个UI组件，然后使用的是Vue3+Vite+Ts+tailwindcss
问题出现在这个静态资源这里，我的静态资源放在了src/assets下，包括图片还有style.css，

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Noto+Color+Emoji&family=Noto+Sans+SC:wght@100;200;300;400;500;600;700;800;900&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap");@tailwind base;@tailwind components;@tailwind utilities;

然后我使用Vite的库模式打包,并没有打包我的style.css文件，只打包了vue文件中的style标签的css，并且静态文件的图片也是没有打包，而是直接转换成了base64,对于图片多的情况下，这样页面会很卡顿，我想知道怎么解决呢？

网上搜索的方法都尝试过，发现并没有作用

Answer 1

1. 猜测你的 style.css 没有 import，所以 vite 认为不需要，就没打包
2. 图片 base64 不会导致卡顿，最多就是加载时间变长
3. 你可以调整 build.assetsInlineLimit 配置要求 vite 不要 inline 小资源。

Answer 2

在 Vite 项目中，静态资源的处理是自动的，它会将小于某个阈值（默认为 4KB）的图片等资源转为 base64 格式内嵌到 JavaScript 中。这个阈值可以在 vite.config.ts 或 vite.config.js 文件中通过 optimizeDeps.include 和 optimizeDeps.exclude 进行配置。

对于你提到的 style.css 文件未被打包的问题，这可能是因为在 Vite 中，CSS 文件需要被导入到 JavaScript 或 Vue 文件中才会被处理。你可以尝试在你的 Vue 文件中导入这个 CSS 文件，如下：

import './assets/style.css'

对于图片，如果你不希望它们被转为 base64 格式，你可以尝试以下步骤：

1. 在 vite.config.ts 或 vite.config.js 文件中，调整 build.rollupOptions.output 配置项，将 assets 设置为 'inline' 以外的值，例如 'copy'。这样 Vite 将会复制大于阈值的静态资源到输出目录，而不是将它们转为 base64。

// vite.config.ts 或 vite.config.jsexport default {  build: {    rollupOptions: {      output: {        assets: 'copy',      },    },  },}

2. 确保你的静态资源在 src/assets 目录下，且你的项目结构正确。例如，如果你的 style.css 文件中引用了图片，那么这些图片应该放在与 style.css 同一目录下。

以上步骤应该可以帮助你解决静态资源打包的问题。如果问题依然存在，请检查你的项目配置和代码，确保没有遗漏或错误。