Vue项目中通过Webpack获取Git版本号失败问题求助

我的vue.config.js配置如下：

const webpack = require('webpack');
const { GitRevisionPlugin } = require('git-revision-webpack-plugin');
const gitRevisionPlugin = new GitRevisionPlugin();

module.exports = {
  configureWebpack: {
    plugins: [
      gitRevisionPlugin,
      new webpack.DefinePlugin({
          VERSION: JSON.stringify(gitRevisionPlugin.version()),
          COMMITHASH: JSON.stringify(gitRevisionPlugin.commithash()),
          BRANCH: JSON.stringify(gitRevisionPlugin.branch()),
      }),
    ],
  }
};

在App.vue中尝试获取VERSION：

<script setup lang="ts">
import { shallowRef, ref } from 'vue';

const version = ref(VERSION);
</script>

但无法生效。以为是ESLint未识别全局变量，于是在.eslintrc中添加配置：

"globals": {
  "VERSION": "readonly",
}

问题仍未解决，请问哪里操作有误？

问题根源 #

1. TypeScript全局变量未声明：仅配置ESLint允许全局VERSION，但TypeScript编译阶段无法识别该变量，直接抛出“找不到名称”错误，导致webpack的变量注入逻辑无法生效。
2. 开发服务未重启：修改webpack配置后，必须重启开发服务才能让新的全局变量注入规则生效，热更新不会重新加载webpack配置。

修复步骤 #

1. 添加TypeScript全局声明文件
   在项目src目录下创建global.d.ts，写入：

declare const VERSION: string;
declare const COMMITHASH: string;
declare const BRANCH: string;

这会告诉TypeScript这些是全局可用的字符串变量，消除编译错误。

2. 确认依赖安装与配置有效性
   确保git-revision-webpack-plugin已正确安装：

npm install git-revision-webpack-plugin --save-dev

可在vue.config.js中临时添加日志验证：

console.log('Git版本:', gitRevisionPlugin.version());

运行npm run serve查看控制台是否输出正确的Git版本号，确认插件能正常工作。

3. 重启开发服务
   停止当前的开发服务，重新执行npm run serve，让webpack加载新的配置和全局变量。

4. 验证变量获取
   修改App.vue代码，直接使用全局变量：

<script setup lang="ts">
import { ref } from 'vue';

const version = ref(VERSION);
console.log('当前版本:', version.value);
</script>

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

额外提醒 #

• 该方案仅适用于Vue CLI（基于webpack）的项目，Vite项目需使用import.meta.env方式注入变量。
• 确保项目根目录是Git仓库，否则插件无法读取Git信息。

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