Vue 项目中使用 EJS 模板动态注入环境变量

Vue 项目中使用 EJS 模板动态注入环境变量

在使用 Vue CLI 构建项目时，public/index.html 是一个 EJS 模板文件。很多小伙伴想要在 HTML 里根据 process.env 注入动态变量，比如根据生产环境设置 baseUrl，却发现直接写：

var baseUrl = process.env.VUE_APP_BASE_API;

最后打包后仍然输出的是字面量 process.env.VUE_APP_BASE_API，而不是它的值。

---

问题原因

Vue CLI 中 public/index.html 是由 EJS 渲染的模板。
在 EJS 语法中：

✅ <% ... %> 表示逻辑代码（不会输出内容）
✅ <%= ... %> 表示输出变量值（会自动 HTML 转义）
✅ <%- ... %> 表示输出变量值（不转义）

所以你要在 HTML 中输出环境变量的值，必须用：

<%= process.env.VUE_APP_BASE_API %>

---

示例代码

以下代码会在生产环境下把 VUE_APP_BASE_API 注入到全局 JS 变量：

<% if (process.env.NODE_ENV === 'production') { %>
  <script>
    window.SITE_CONFIG['projectName'] = 'zhubayi';
    var baseUrl = '<%= process.env.VUE_APP_BASE_API %>';
  script>
<% } %>

这里：
✅ if 判断是否是生产环境
✅ <%= ... %> 输出 VUE_APP_BASE_API 的值为字符串

.env.production文件

# 开发环境配置
NODE_ENV = 'production'

# 页面标题
VUE_APP_TITLE = 测试平台

# 管理系统/生产环境
VUE_APP_BASE_API ='/test-api'

---

使用建议

• 注意 1：环境变量必须在 .env.production 或 .env 文件中定义，且变量名要以 VUE_APP_ 开头，才会在 Vue CLI 中生效。
• 注意 2：如果你输出的变量是路径，注意末尾是否带 /，拼接时容易出错。
• 注意 3：如果需要输出复杂 JSON，可以使用 JSON.stringify(process.env.MY_VAR)。

---

总结

✅ 在 EJS 模板中，想要输出变量值，必须用 <%= ... %>。
✅ 普通 <% ... %> 是逻辑控制，不会输出任何内容。

---