html无法运行主因是本地file://协议安全限制，非代码错误；应起http服务（如live server）以http://localhost访问，避开跨域拦截与路径解析问题。
HTML 文件本身不支持运行时读取系统环境变量，所谓“HTML 配环境变量”，本质是构建阶段把变量值注入到 HTML 模板中——不是在浏览器里 process.env，而是在打包时替换占位符。
为什么直接在 HTML 里写 process.env.API_BASE 会报错
浏览器没有 process 对象，process.env 是 Node.js 运行时的全局对象。HTML 被浏览器加载后执行脚本时，这段代码会直接抛出 ReferenceError: process is not defined。
- 常见错误现象：控制台报错
Uncaught ReferenceError: process is not defined，页面白屏或 JS 功能失效 - 根本原因：HTML + 原生 JS 环境无 Node.js 上下文，无法访问构建工具（如 Webpack）定义的
process.env - 真正起作用的只有两种方式：构建时字符串替换，或服务端渲染时注入（如 Nginx 变量、PHP echo）
用 html-webpack-plugin 注入变量到 HTML 模板
这是最常用、最可控的方式，适用于 Webpack 项目。变量不会出现在 JS 运行时，而是以纯文本形式写进最终生成的 HTML 中。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 安装插件：
npm install --save-dev html-webpack-plugin - 在
webpack.config.js的plugins中配置：new HtmlWebpackPlugin({ template: 'src/index.html', templateParameters: { API_HOST: process.env.API_HOST || 'https://dev.example.com', BUILD_TIME: new Date().toISOString() } }) - 在
src/index.html中使用：<script>window.API_HOST = '<%= htmlWebpackPlugin.options.templateParameters.API_HOST %>';</script> - 注意：模板语法依赖
html-loader或默认的html-webpack-plugin渲染逻辑，不要混用 EJS/Handlebars 除非显式配置 loader
用 DefinePlugin 定义全局常量（仅限 JS 可见）
这个插件只影响被 Webpack 打包的 JS 文件，对 HTML 文件本身无任何注入能力。但它能让你在 JS 里安全使用类似环境变量的常量。
- 配置示例：
new webpack.DefinePlugin({ 'API_ENV': JSON.stringify(process.env.NODE_ENV), 'IS_PROD': JSON.stringify(process.env.NODE_ENV === 'production') }) - JS 中可直接使用：
if (IS_PROD) { console.log('prod mode') } - ⚠️ 陷阱：字符串必须用
JSON.stringify()包裹，否则 Webpack 会尝试解析为变量名而非字面量 - ⚠️ 不要写
'process.env.NODE_ENV'—— 这只是字面字符串，不会被替换；应写'process.env.NODE_ENV'的等价形式，如'NODE_ENV'并配合DefinePlugin显式映射
纯静态 HTML 怎么“假装”有环境变量
没有构建工具？又想一套代码部署多环境？只能靠外部手段预处理 HTML 文件。
- 方案一：用 shell 脚本替换占位符（Linux/macOS）：
sed -i 's/__API_HOST__/https:\/\/uat.example.com/g' index.html - 方案二：CI/CD 流水线中用
envsubst（需安装 gettext）：envsubst index.html，前提是 HTML 中写的是${API_HOST} - 方案三：Nginx 在响应时注入（需开启
sub_filter）：location / { sub_filter '__API_HOST__' 'https://prod.example.com'; sub_filter_once off; } - 关键限制：所有这些方式都要求 HTML 文件内容在传输前被修改，浏览器拿到的已是“填好值”的最终版本，不存在运行时切换
最容易被忽略的一点：环境变量名一旦写死在 HTML 模板里（比如 ），就和构建命令强绑定——你得确保 CI 环境里 API_HOST 确实被 export 过，否则注入空值，线上请求直接 404。别只测本地 npm run build，一定要验证 CI 构建产物里的 HTML 是否含正确值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
