如何在我的 vue3 应用程序中显示 package.json 中的版本号？

Question

我想显示我的应用程序的版本号，在 package.json 中定义。我正在使用 Vite、Vue 3、Typescript 和带有组合 API 的脚本设置。

我解决了这个问题，但我的声誉太低，无法回答这个问题：

如何使用Vite向用户显示package.json中的当前应用版本？

这里是如何在 Vue 3 中做到这一点。

使用此答案作为基础：https://stackoverflow.com/a/74860417/12008976。

所以，添加

import packageJson from "./package.json"

和

define: {
  'import.meta.env.PACKAGE_VERSION': JSON.stringify(packageJson.version),
},

到

vite.config.ts

添加这个

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

interface ImportMetaEnv {
  readonly PACKAGE_VERSION: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

到 /src

 中的 

env.d.ts

现在，这为

import.meta.env

添加了智能感知。但是您不能直接在 Vue 组件中使用这些 import 语句。我使用 Vue 应用程序的 globalProperties 修复了它。

添加

app.config.globalProperties.versionNumber = import.meta.env.PACKAGE_VERSION

到

main.ts

现在，在组件中添加

<script setup lang="ts">
const version = getCurrentInstance()?.appContext.config.globalProperties.versionNumber
</script>

<div>{{ version }}</div>

我的问题是：这是在 Vue 3 中解决这个问题的最佳方法吗？

Answer 1

我问了同样的问题，大多数解决方案与你提到的类似，但后来我找到了这个答案。

将新变量添加到您的

.env

文件中：

VITE_APP_VERSION=$npm_package_version

然后您可以在您的应用程序中使用它：

const version = import.meta.env.VITE_APP_VERSION

但是我没有找到任何有关

$npm_package_*

变量如何工作的文档，但显然它们是从您的

package.json

文件自动填充的。 如果您发现任何资源，请在此处添加。