5

使用 create-react-app 可以做到process.env.REACT_APP_VERSION这一点。

Vite中是否有等价物？

4

5 回答 5

12

如果要使用插件，请参阅Adarsh 的回答

但是自己实现它非常容易。您可以define在vite.config.js. 在这里阅读

vite.config.js

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

组件.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>

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

于 2021-06-23T05:03:52.780 回答
4

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

于 2021-08-20T21:26:57.303 回答
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),
  },
});

如果您还没有，请定义 aglobal.d.ts并添加 a declare：

declare const APP_VERSION: string;

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

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

VSCode MacOS：⌘</kbd> + ⇧</kbd> + P > Restart TS Server

VSCode 窗口： ctrl+⇧</kbd> + P > Restart TS Server

于 2021-12-29T20:01:58.310 回答
2

这对我有用：

import { version } from '../../package.json'
于 2022-01-20T12:39:38.550 回答
0

下面的答案包括

  1. 导入 Vue 版本的安全方式。

  2. 使用 npm 命令增加语义版本

使用 npm 和 env 进行版本控制的安全和语义方式

于 2021-12-13T10:33:09.780 回答