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

Question

通过 create-react-app 可以实现process.env.REACT_APP_VERSION这一点。

Vite中有类似的吗？

Answer 1

对于 React 和 TypeScript 用户：

\n

添加一个define到您的vite.config.ts：

\n

import react from \'@vitejs/plugin-react\';\nimport { defineConfig } from \'vite\';\n\nexport default defineConfig({\n  plugins: [react()],\n  define: {\n    APP_VERSION: JSON.stringify(process.env.npm_package_version),\n  },\n});\n

\n

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

\n

declare const APP_VERSION: string;\n

\n

您现在可以APP_VERSION在代码中的任何位置使用该变量，Vite 将在编译时替换它。

\n

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

\n

VSCode MacOS: \xe2\x8c\x98+ \xe2\x87\xa7+ P\xc2\xa0> Restart TS Server

\n

VSCode Windows: ctrl+ \xe2\x87\xa7+ P\xc2\xa0> Restart TS Server

\n

Answer 2

您可以define在vite.config.js. 在这里阅读相关内容

vite.config.js

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

我的组件.vue

<script setup>
// can't be used directly on the template
const version = __APP_VERSION__
</script>
<template>
    <div>{{ version }}</div>
</template>

'__APP_VERSION__'只要不与 javascript 语法或其他变量冲突，您应该能够进行更改。

打字稿

直接取自Vite 文档

对于 TypeScript 用户，请确保在env.d.ts或vite-env.d.ts文件中添加类型声明以获取类型检查和 Intellisense。

vite-env.d.ts

declare const __APP_VERSION__: string

Answer 3

Vite 4、React、Typescript 设置

这对我有用。

我导入package.json并vite.config.ts定义了一个PACKAGE_VERSION环境变量。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import packageJson from './package.json';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  define:  {
    'import.meta.env.PACKAGE_VERSION': JSON.stringify(packageJson.version)
  }
})

我添加"resolveJsonModule": true到 的编译器选项中 tsconfig.node.json。
我添加"./package.json"到包含数组 tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true
  },
  "include": ["vite.config.ts", "./package.json"]
}

为了使智能感知工作PACKAGE_VERSION，我将其添加到vite-env.d.ts

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true
  },
  "include": ["vite.config.ts", "./package.json"]
}

我可以在我的反应应用程序中的任何地方使用{import.meta.env.PACKAGE_VERSION}来显示包版本。

Answer 4

最简单的解决方案

// .env
VITE_REACT_APP_VERSION=$npm_package_version

// App.jsx
...
console.log('ver. ', import.meta.env.VITE_REACT_APP_VERSION)
...

Answer 5

如果你不想使用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。