Vue3+Vite+TS项目展示package.json版本号的方案是否最优？

你的方案确实能实现展示package.json版本号的需求，但其中步骤3（全局挂载）和步骤4（通过getCurrentInstance获取）属于冗余操作，可以直接简化，以下是更简洁的最优方案：

优化后的实现步骤 #

1. Vite配置注入版本号 #

在vite.config.ts中导入package.json，通过define将版本号注入到环境变量：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pkg from './package.json'

export default defineConfig({
  plugins: [vue()],
  define: {
    'import.meta.env.PACKAGE_VERSION': JSON.stringify(pkg.version)
  }
})

2. 扩展TypeScript类型提示 #

在src/env.d.ts中扩展ImportMetaEnv类型，确保TS能识别自定义环境变量：

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly PACKAGE_VERSION: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

3. 组件中直接使用 #

在script setup语法的组件里，直接通过import.meta.env.PACKAGE_VERSION获取版本号，无需全局挂载或getCurrentInstance：

<template>
  <div>当前应用版本：{{ version }}</div>
</template>

<script setup lang="ts">
const version = import.meta.env.PACKAGE_VERSION
</script>

为什么这是最优方案 #

• 更简洁：省去全局挂载和实例获取的冗余步骤，直接利用Vite的环境变量注入能力，符合Vite生态设计
• 类型安全：通过TypeScript类型扩展，保留完整的智能提示，避免类型报错
• 符合Composition API风格：在script setup中直接读取环境变量，逻辑清晰，无需依赖全局属性

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