如何在Nx中将package.json版本设为环境变量供浏览器访问？

方法1：通过Webpack配置注入环境变量 #

如果你的Nx项目使用Webpack构建，可自定义Webpack配置，读取package.json的版本号后，通过DefinePlugin注入到全局环境变量中：

1. 在项目根目录（或对应应用的目录）创建/修改webpack.config.js：

const { composePlugins, withNx } = require('@nx/webpack');
const { DefinePlugin } = require('webpack');
const packageJson = require('./package.json');

module.exports = composePlugins(withNx(), (config) => {
  // 注入带NX_前缀的环境变量
  config.plugins.push(
    new DefinePlugin({
      'process.env.NX_APP_VERSION': JSON.stringify(packageJson.version),
    })
  );
  return config;
});

2. 之后在浏览器端代码中，直接通过process.env.NX_APP_VERSION访问版本号即可。

方法2：用脚本自动生成临时.env文件 #

编写Node脚本读取package.json的版本号，写入到.env.local文件中（Nx会自动加载带NX_前缀的变量），并在构建前执行该脚本：

1. 创建脚本文件（比如scripts/set-version-env.js）：

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

// 写入带NX_前缀的版本变量
const envContent = `NX_APP_VERSION=${packageJson.version}\n`;
fs.writeFileSync('./.env.local', envContent);

2. 修改项目根目录的package.json，添加构建前置命令：

"scripts": {
  "prebuild": "node scripts/set-version-env.js",
  "build": "nx build your-app-name"
}

每次执行npm run build时，脚本会自动生成包含版本号的.env.local，浏览器端同样可以通过process.env.NX_APP_VERSION访问。

方法3：直接在代码中导入package.json #

如果你的打包工具支持导入JSON文件（Webpack、Vite默认都支持），可以直接在代码中导入package.json的版本字段：

// 在组件或业务代码中直接导入
import { version } from '../package.json';

console.log('当前应用版本：', version);

注意：现代打包工具会自动Tree Shaking，只会将version字段打包进产物，不会引入整个package.json的内容，无需担心体积问题。如果是TypeScript项目，需要在tsconfig.json中开启resolveJsonModule: true。

针对Vite构建的Nx项目 #

如果你的项目使用Vite，可以修改vite.config.ts，通过define配置注入变量：

import { defineConfig } from 'vite';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import packageJson from './package.json';

export default defineConfig({
  plugins: [nxViteTsPaths()],
  define: {
    'process.env.NX_APP_VERSION': JSON.stringify(packageJson.version),
  },
});

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