问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像头饰
靳先生
    713

    我想做一个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,对于图片多的情况下，这样页面会很卡顿，我想知道怎么解决呢？

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

    Microsoftvue.jsvitetypescripttailwind-css
    阅读 808
    avatarAI BotBETA

    在 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.js
export default {
  build: {
    rollupOptions: {
      output: {
        assets: 'copy',
      },
    },
  },
}
    1. 确保你的静态资源在 src/assets 目录下，且你的项目结构正确。例如，如果你的 style.css 文件中引用了图片，那么这些图片应该放在与 style.css 同一目录下。

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

    1 个回答
    得票最新
    头像头饰
    Meathill
      22.2k123642
      1. 猜测你的 style.css 没有 import，所以 vite 认为不需要，就没打包
      2. 图片 base64 不会导致卡顿，最多就是加载时间变长
      3. 你可以调整 build.assetsInlineLimit 配置要求 vite 不要 inline 小资源。
      查看全部 1 个回答
      推荐问题
      logo
      Microsoft
      子站问答
      访问
      宣传栏