vue.js - 我的项目与 Vite 捆绑后样式丢失

Question

当我以 IIFE 格式编译应用程序时，我的样式(包括 SFC 中的样式标记和导入到 app.ts 的 css)作为标题丢失。

我不知道它是由 Vite 还是 RollUp 提供的...它可以与 viteserve 正常工作，但不能与 vite build 一起工作。

我看到以其他格式发出的 css，但没有看到 IIFE。为此，我无法从 CDN 加载 Vue，而我想要这样做。

// vite.config.js
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(),
  ],
  build: {
    minify: true,
    rollupOptions: {
      external: ["vue"],
      output: {
        format: "iife",
        globals: {
          vue: "Vue",
        },
      },
    },
  },
});

// src/app.ts
import { createApp } from "vue";

import App from "./App.vue";

import "./main.css";

createApp(App).mount("#app");

<!-- src/App.vue -->
<template>
  <h1>Hello World</h1>

  <button @click="increment">Click Me!</button>
  <div>Clicked: {{ count }}</div>
</template>

<script setup lang="ts">
import { ref } from "vue";

//#region Counter
const count = ref(0);
const increment = () => (count.value += 1);
//#endregion
</script>

<style scoped>
h1 {
  color: green;
}
</style>

Answer 1

我在文档中发现，我所需要做的就是将 build.cssCodeSplit 设置为 false。

https://vitejs.dev/guide/features.html#css-code-splitting

Related issue for follow up