使用Vite以IIFE格式打包项目后样式丢失求助

问题原因 #

Vite默认针对IIFE打包格式不会自动处理CSS的提取或注入——IIFE模式主要面向纯脚本输出，Vite默认的CSS处理逻辑（提取到单独文件或注入页面）在该模式下未触发，导致SFC内的<style>标签和全局CSS全部丢失。

解决方案 #

方案1：提取CSS到单独文件（推荐，保持资源分离） #

修改vite.config.js，添加CSS输出配置强制提取CSS：

import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";
import env from "vite-plugin-env-compatible";

export default defineConfig({
  plugins: [
    env({
      prefix: "",
      mountedPath: "process.env",
    }),
    vue(),
  ],
  css: {
    output: {
      filename: "app.css", // 指定CSS输出文件名
      chunkFilename: "[name].css"
    }
  },
  build: {
    minify: true,
    rollupOptions: {
      external: ["vue"],
      output: {
        format: "iife",
        globals: {
          vue: "Vue",
        },
      },
    },
  },
});

打包后dist目录会生成app.css，需在HTML中手动引入该文件，同时加载Vue CDN和IIFE脚本：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue IIFE App</title>
  <link rel="stylesheet" href="/dist/app.css">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app"></div>
  <script src="/dist/app.js"></script>
</body>
</html>

方案2：将CSS内联到IIFE脚本中 #

若希望仅输出单个JS文件，可配置Vite将CSS内联到IIFE里，执行时动态插入样式标签：

import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";
import env from "vite-plugin-env-compatible";

export default defineConfig({
  plugins: [
    env({
      prefix: "",
      mountedPath: "process.env",
    }),
    vue(),
  ],
  css: {
    injectType: "styleTag", // 强制将CSS注入为style标签
  },
  build: {
    minify: true,
    rollupOptions: {
      external: ["vue"],
      output: {
        format: "iife",
        globals: {
          vue: "Vue",
        },
      },
    },
  },
});

打包后仅生成单个JS文件，HTML只需引入Vue CDN和该脚本：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue IIFE App</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app"></div>
  <script src="/dist/app.js"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者CornerSyrup