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

Question

使用 create-react-app 可以使用 process.env.REACT_APP_VERSION。

Vite有对应的吗？

Answer 1

如果要使用插件，请参阅

但是自己实现起来非常容易。您可以在 vite.config.js 中使用 define。了解一下 here

vite.config.js

export default {
    plugins: [vue()],
    define: {
        '__APP_VERSION__': JSON.stringify(process.env.npm_package_version),
    }
}

component.vue

<template>
    <div>{{ version }}</div>
</template>
<script>
export default {
    data () {
        version: __APP_VERSION__
    },
}
</script>

或 <script setup>

<script setup>
const version = __APP_VERSION__
</script>
<template>
    <div>{{ version }}</div>
</template>

只要不与 javascript 语法或其他变量冲突，您应该可以更改 '__APP_VERSION__'。

Answer 2

如果您不想使用 define，可以使用 vite 插件。

https://www.npmjs.com/package/vite-plugin-package-version

// vite.config.js
import loadVersion from 'vite-plugin-package-version';

export default {
  plugins: [loadVersion()],
};

将使用您在 package.json 中指定的版本注入 import.meta.env.PACKAGE_VERSION。

Answer 3

以下答案包括

导入Vue版本的安全方式。
使用 npm 命令增加语义版本

Answer 4

对于 React 和 TypeScript 用户：

将 define 添加到您的 vite.config.ts:

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [react()],
  define: {
    APP_VERSION: JSON.stringify(process.env.npm_package_version),
  },
});

如果您还没有，请定义一个 vite-env.d.ts 或 env.d.ts 并添加一个 declare:

declare const APP_VERSION: string;

您现在可以在代码的任何地方使用变量 APP_VERSION & Vite 将在编译时替换它。

注意：您可能需要重新启动 TS 服务器才能让 intellisense 获取声明：

VSCode MacOS：⌘ + ⇧ + P > Restart TS Server

VSCode Windows: ctrl + ⇧ + P > Restart TS Server

Answer 5

这对我有用：

import { version } from '../../package.json'

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

How can I display the current app version from package.json to the user using Vite?

npm

package.json

vite

以下答案包括

对于 React 和 TypeScript 用户：