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

Question

我已经使用 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那么Vue在构建或使用webpack-dev-server时如何将自己注入到索引中呢？

Answer 1

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

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

Answer 2

替代方法：

<% if(process.env.NODE_ENV === 'production') { %>
    <script>...</script>
<% } %>

Answer 3

试试这个库，它允许有条件的预处理：

js-conditional-compile-loader

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

How to conditionally add code in head of Vue app

google-tag-manager

webpack

webpack-dev-server

vuejs2

vue-cli