Angular 5：如何在index.html中检测生产环境并切换CSS文件？

当然有办法实现这个需求！根据不同的项目场景，这里给你几种实用的方案：

方案1：使用前端构建工具（推荐） #

如果你的项目用了Webpack、Vite这类现代构建工具，它们本身就提供了环境变量的支持，能轻松帮你区分开发/生产环境：

对于Vite项目 #

直接在index.html里使用Vite内置的import.meta.env.PROD变量判断：

<link rel="stylesheet" href="assets/css/external-material<%= import.meta.env.PROD ? '.min' : '' %>.css" />

生产构建时，import.meta.env.PROD会自动变为true，最终引入的就是压缩后的.min.css文件；开发环境则会引入未压缩的版本。

对于Webpack项目 #

借助html-webpack-plugin插件，在Webpack配置文件中注入环境变量后，在index.html模板里使用：

<link rel="stylesheet" href="assets/css/external-material<%= process.env.NODE_ENV === 'production' ? '.min' : '' %>.css" />

记得在Webpack配置里设置mode: 'production'或者通过DefinePlugin注入NODE_ENV变量。

方案2：纯静态页面（无构建工具） #

如果是纯静态部署的项目，可以通过域名或者URL参数来判断环境，用JavaScript动态加载CSS：

<script>
  // 根据你的生产域名调整判断条件，比如生产环境是www.your-site.com
  const isProduction = window.location.hostname === 'www.your-site.com';
  const cssFile = isProduction ? 'external-material.min.css' : 'external-material.css';

  // 动态创建link标签并插入到head中
  const linkTag = document.createElement('link');
  linkTag.rel = 'stylesheet';
  linkTag.href = `assets/css/${cssFile}`;
  document.head.appendChild(linkTag);
</script>

这种方式不需要额外工具，适合简单的静态站点，但要注意域名判断的准确性。

方案3：后端模板渲染（有后端支持） #

如果你的index.html是由后端（比如Node.js、PHP等）渲染的，可以让后端根据自身的环境变量来替换CSS文件名：
比如Node.js Express + EJS模板：

<link rel="stylesheet" href="assets/css/external-material<%= isProduction ? '.min' : '' %>.css" />

后端在渲染模板时，将isProduction变量设置为当前环境的判断结果即可。

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