时间戳

首页 > 解决方案 > 如何在 Vue 应用程序的头部有条件地添加代码

webpack - 如何在 Vue 应用程序的头部有条件地添加代码

问题描述

我已经使用 Vue CLI 制作了一个简单的 Vue 应用程序，现在我想在 html 的头部有条件地添加 Google 跟踪代码管理器代码，仅用于生产构建。我可以使用像 php 这样的服务器端语言来做到这一点，所以我尝试将 index.html 更改为 index.php，但是当我构建项目时，它输出一个带有注入应用程序的 index.html 和没有注入应用程序的 index.php dist 文件夹。php 代码也不适用于 vue cli 中的 webpack-dev-server。

如何将一些服务器端代码（不一定是 php）集成到 vue cli 生成的 vue 应用程序的索引中，以有条件地为生产构建添加标签管理器代码？我不确定 vue cli 构建过程是如何完成的。我可以告诉它为生产构建使用不同的 index.html 吗？

额外：我有兴趣了解更多关于 vue cli 构建过程的信息。前任。模板 index.html 中没有 script 标签，那么 Vue 在构建或使用 webpack-dev-server 时如何将自己注入到索引中？

标签： webpackvuejs2google-tag-managerwebpack-dev-servervue-cli

解决方案

刚刚在vue cli文档中看到index.html页面是webpack处理的。这意味着我可以使用 lodash 模板语法在生产环境中轻松地在头部添加标签

<head>
...
<%= process.env.NODE_ENV === 'production' ? '<script>...</script>' : '' %>
...
</head>

推荐阅读