Vite 内联 CSS 和 JS 的解决方案

使用 vite-plugin-singlefile（推荐）

这个插件专门用于将整个 Vite 应用打包成单个 HTML 文件，内联所有 JS 和 CSS。

安装

pnpm i vite-plugin-singlefile -D

配置 vite.config.js

import { defineConfig } from 'vite'
import { viteSingleFile } from 'vite-plugin-singlefile'

export default defineConfig({
  plugins: [vue(), viteSingleFile()],
  build: {
    cssCodeSplit: false, // 确保 CSS 不分割
    assetsInlineLimit: 1024 * 1024 * 10 // 强制内联所有资源
  }
})

效果

• 所有 JS 和 CSS 会被内联到 index.html。
• 适合生成单个 HTML 文件，如单页面、离线应用或邮件模板。

其它的公共库可使用 CDN 引入

import { Plugin as importToCDN } from 'vite-plugin-cdn-import'

export default defineConfig({
  plugins: [
    vue(),
    importToCDN({
      modules: [
        {
          name: 'vue',
          var: 'Vue',
          path: 'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js'
        },
        {
          name: 'element-plus',
          var: 'ElementPlus',
          path: 'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.full.min.js'
        },
        {
          name: 'axios',
          var: 'axios',
          path: 'https://cdnjs.cloudflare.com/ajax/libs/axios/1.7.7/axios.min.js'
        }
      ]
    }),
    visualizer(),
    viteSingleFile()
  ],
  build: {
    cssCodeSplit: false, // 确保 CSS 不分割
    assetsInlineLimit: 1024 * 1024 * 10 // 强制内联所有资源
  }
})