Angular CLI：生产构建后如何获取版本信息？

嘿，这个需求其实挺常见的，我给你分享几个实用的实现方式，不管是生成version.txt还是从构建文件里提取版本都能搞定：

方法一：构建时自动生成version.txt文件 #

这是最直接的方式，通过npm脚本结合简单的Node.js脚本就能实现：

1. 创建生成版本文件的脚本
   在项目根目录新建generate-version.js，内容如下：

const fs = require('fs');
const path = require('path');
const packageJson = require('./package.json');

// 替换成你的项目构建输出目录，默认是dist/项目名
const distDir = path.join(__dirname, 'dist/your-project-name');

// 确保dist目录存在（ng build会自动创建，但保险起见可以加）
if (!fs.existsSync(distDir)) {
  fs.mkdirSync(distDir, { recursive: true });
}

// 写入版本到version.txt
fs.writeFileSync(path.join(distDir, 'version.txt'), packageJson.version);
console.log(`已生成版本文件：${distDir}/version.txt，版本号：${packageJson.version}`);

2. 修改npm构建脚本
   打开package.json，把原有的build脚本改成：

"scripts": {
  "build:prod": "ng build --prod && node generate-version.js"
}

之后运行npm run build:prod，构建完成后就会在你的dist目录下生成version.txt，里面就是package.json里的版本号。

方法二：从已构建的文件中提取版本信息 #

如果你已经在应用标题里显示了版本，那可以通过脚本直接从构建后的文件里提取：

方式A：用命令行工具快速提取（适用于Linux/macOS） #

假设你在index.html里的标题是<title>My App v1.2.3</title>，可以用grep命令提取：

grep -oP 'v\d+\.\d+\.\d+' dist/your-project-name/index.html > dist/your-project-name/extracted-version.txt

把这个命令加到你的build脚本里就行。

方式B：用Node.js脚本精准提取（跨平台） #

如果需要更灵活的处理，写个Node.js脚本：

const fs = require('fs');
const path = require('path');

const distDir = path.join(__dirname, 'dist/your-project-name');
const indexContent = fs.readFileSync(path.join(distDir, 'index.html'), 'utf8');

// 根据你标题里的版本格式调整正则，比如你的标题是"App Name - v1.0.0"就用这个正则
const versionRegex = /v(\d+\.\d+\.\d+)/;
const matchResult = indexContent.match(versionRegex);

if (matchResult) {
  const version = matchResult[1];
  console.log(`提取到版本号：${version}`);
  fs.writeFileSync(path.join(distDir, 'extracted-version.txt'), version);
} else {
  console.error('未在构建文件中找到版本信息，请检查标题格式是否匹配正则');
}

同样把这个脚本加到build脚本的末尾执行即可。

方法三：Angular环境变量注入版本（更可靠的提取基础） #

为了让版本信息在构建后更容易提取，建议先把版本注入到Angular的环境变量里：

1. 在环境文件中引入版本
   打开src/environments/environment.prod.ts，加入package.json的版本：

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

export const environment = {
  production: true,
  appVersion: version
};

2. 在应用中使用这个版本
   比如在app.component.ts里把版本加到标题：

import { Component } from '@angular/core';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = `My App v${environment.appVersion}`;
}

这样构建后的文件里会有一个固定格式的版本字符串，不管后续怎么调整标题，只要环境变量里的版本在，提取就不会出错。

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