如何从SvelteKit/Svelte导出纯HTML、CSS、JS（类Next.js静态导出）？

一、纯Svelte项目导出HTML文件 #

如果是没用到SvelteKit的纯Svelte项目，默认用Rollup构建的话，你可以通过配置插件来生成独立的HTML文件：

• 先安装必要插件：@rollup/plugin-html
• 修改rollup.config.js，加入HTML插件并配置模板，让Rollup自动把编译后的JS、CSS注入到HTML里
• 执行npm run build，输出目录（一般是dist）里就会生成完整的HTML文件，你可以选择引用外部CSS/JS，也可以用插件把CSS内嵌到HTML中

给个简单的配置示例：

import html from '@rollup/plugin-html';
import svelte from 'rollup-plugin-svelte';

export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'es'
  },
  plugins: [
    svelte({
      css: css => css.write('dist/bundle.css')
    }),
    html({
      template: ({ files }) => `
        <!DOCTYPE html>
        <html lang="zh-CN">
          <head>
            <meta charset="UTF-8">
            <title>我的Svelte应用</title>
            ${files.css.map(f => `<link rel="stylesheet" href="${f.fileName}">`).join('\n')}
          </head>
          <body>
            <div id="app"></div>
            ${files.js.map(f => `<script src="${f.fileName}"></script>`).join('\n')}
          </body>
        </html>
      `
    })
  ]
};

二、SvelteKit实现类Next.js的静态导出 #

SvelteKit本身支持静态导出，完全能达到类似Next.js next export的效果，步骤如下：

1. 配置静态适配器 #

先安装适配器：

npm install -D @sveltejs/adapter-static

然后修改svelte.config.js，替换原有适配器：

import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter({
      pages: 'build', // 页面文件输出目录
      assets: 'build', // 静态资源输出目录
      // 如果是单页应用，需要设置fallback: 'index.html'，普通多页应用无需配置
      fallback: undefined
    })
  }
};

export default config;

2. 开启预渲染 #

要让所有页面生成静态HTML，必须开启预渲染：

• 全局开启：在src/routes/+layout.js里导出prerender: true

export const prerender = true;

• 单个页面开启：在对应页面的+page.js或+page.server.js里导出prerender: true
• 动态路由需额外配置：在+page.server.js里通过export async function entries()返回所有可能的路由参数，确保SvelteKit能预渲染出每个动态路由的HTML文件

3. 执行导出 #

直接运行构建命令：

npm run build

执行完成后，build目录下就是所有静态文件——每个路由对应一个HTML，CSS和JS打包在_app目录下，这些文件可直接部署到任何静态托管平台，无需后端服务支持。

额外需求：纯静态无JS的HTML #

如果想生成完全没有交互JS的纯HTML（去掉Svelte的hydration逻辑），可以在页面的+page.js里导出hydrate: false：

// src/routes/+page.js
export const hydrate = false;

这样该页面构建后只会包含HTML和CSS，没有任何Svelte相关的JS代码。

内容的提问来源于stack exchange，提问作者Marzuk Rahman Adi