如何在SvelteKit/Vite应用中添加版本信息（含Git提交哈希及描述）并在页面展示？

嘿，我来帮你搞定这个问题！你之前用Vite define 没生效，大概率是SvelteKit的配置结构写错了（把Vite配置放在了kit对象外面），再加上TypeScript类型声明缺失导致的。下面给你一步步的解决方案，还能顺便把Git提交哈希和描述也加进去：

一、先修正核心配置问题 #

你之前的svelte.config.js里，Vite配置直接写在了顶层，而SvelteKit要求Vite配置必须放在kit.vite字段下！这就是配置没生效的关键原因。

1. 编写能获取Git信息的配置 #

修改svelte.config.js，加入Git信息获取逻辑，同时把Vite配置放到正确的位置：

import { execSync } from 'child_process';

// 获取Git提交信息的工具函数
function getAppVersion() {
  try {
    // 获取短哈希值
    const commitHash = execSync('git rev-parse --short HEAD').toString().trim();
    // 获取带标签的描述（如果有标签的话）
    const commitDesc = execSync('git describe --tags --always').toString().trim();
    return `${commitDesc} (${commitHash})`;
  } catch (error) {
    // 如果环境里没有Git，返回默认值
    return 'unknown (Git not available)';
  }
}

export default {
  kit: {
    vite: {
      define: {
        // 把版本信息注入为全局变量
        '__APP_VERSION__': JSON.stringify(getAppVersion())
      }
    }
  }
};

2. 添加TypeScript类型声明 #

因为TypeScript不知道__APP_VERSION__这个全局变量，你需要在src目录下创建env.d.ts文件，添加类型声明：

declare const __APP_VERSION__: string;

3. 在组件中使用 #

现在你的index.svelte代码就能正常工作了：

<script lang="ts">
const version: string = __APP_VERSION__;
</script>
<p>Current App version: {version}</p>

二、更推荐的方案：使用Vite环境变量（符合生态规范） #

如果你不想用全局变量，更推荐用Vite的import.meta.env方式，这样更符合Vite的设计规范：

1. 修改Vite配置 #

在svelte.config.js的Vite配置里，把版本信息注入到import.meta.env：

import { execSync } from 'child_process';

function getAppVersion() {
  try {
    const commitHash = execSync('git rev-parse --short HEAD').toString().trim();
    const commitDesc = execSync('git describe --tags --always').toString().trim();
    return `${commitDesc} (${commitHash})`;
  } catch (error) {
    return 'unknown (Git not available)';
  }
}

export default {
  kit: {
    vite: {
      define: {
        'import.meta.env.APP_VERSION': JSON.stringify(getAppVersion())
      }
    }
  }
};

2. 更新TypeScript类型声明 #

修改src/env.d.ts，为ImportMetaEnv添加字段：

interface ImportMetaEnv {
  readonly APP_VERSION: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

3. 在组件中使用 #

直接通过import.meta.env访问版本：

<script lang="ts">
const version = import.meta.env.APP_VERSION;
</script>
<p>Current App version: {version}</p>

三、注意事项 #

• 这个方案是构建时注入版本信息，所以每次构建都会重新获取最新的Git提交信息，适合生产环境。
• 如果是开发环境，你可以考虑在配置里区分环境，比如开发时用固定值，生产时用Git信息。
• 确保你的构建环境里安装了Git，否则会返回默认的unknown值。

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