如何实现编译后单文件Svelte的下载？多文件编译遇阻求助

1. 复用组件结构，创建下载专用入口 #

无需重复编写页面代码，让下载版本直接复用主应用的根组件：

• 在src目录新建download-entry.js，作为下载版本的入口脚本：

import App from './App.svelte';

const app = new App({
  target: document.body,
});

export default app;

• 在public目录新建download-template.html，作为下载版本的HTML模板（和主模板index.html结构一致，仅替换入口脚本）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>可下载版网站</title>
</head>
<body>
  <script type="module" src="/src/download-entry.js"></script>
</body>
</html>

2. 配置Vite多入口打包+单文件插件 #

修改vite.config.js，实现多入口编译，并仅针对下载版本启用单文件打包：

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { viteSingleFile } from 'vite-plugin-singlefile';

export default defineConfig({
  plugins: [
    svelte(),
    // 仅对下载入口应用单文件打包插件
    viteSingleFile({
      exclude: ['index.html'],
      include: ['download.html']
    })
  ],
  build: {
    rollupOptions: {
      // 配置双入口：主网站+可下载版本
      input: {
        main: './index.html',
        download: './public/download-template.html'
      },
      // 禁用代码分割，确保所有内容打包进单个文件
      manualChunks: undefined,
      output: {
        // 固定下载版本的输出文件名，方便前端请求
        entryFileNames: 'assets/[name]-[hash].js',
        chunkFileNames: 'assets/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash].[ext]'
      }
    },
    cssCodeSplit: false, // 将CSS打包进JS，最终注入HTML
    assetsInlineLimit: 100000000, // 强制所有资源内联到HTML
  }
});

3. 实现前端下载按钮逻辑 #

在主应用组件（如App.svelte）中添加下载按钮，点击后触发单文件HTML下载：

<script>
  async function downloadSingleFile() {
    // 请求打包好的单文件HTML
    const response = await fetch('/download.html');
    const htmlContent = await response.text();
    
    // 创建Blob并触发下载
    const blob = new Blob([htmlContent], { type: 'text/html' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'my-website.html';
    a.click();
    URL.revokeObjectURL(url);
  }
</script>

<button on:click={downloadSingleFile}>下载单文件网站</button>

4. 测试打包与下载 #

执行npm run build后，dist目录会生成两个核心文件：

• index.html：主网站的正常多文件结构入口
• download.html：完全内联CSS/JS的单文件HTML，点击按钮即可完成下载

关键注意事项 #

• 若存在外部静态资源（图片、字体等），建议转为base64格式或直接内联到代码中，避免下载后资源失效
• 如果主应用和下载版本需要细微差异，可给根组件App.svelte添加isDownload props，通过参数区分逻辑
• 若遇到资源未内联的问题，可调整assetsInlineLimit的值，确保所有资源都被打包进单HTML

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