Question

我已经使用Vue CLI制作了一个简单的Vue应用程序，现在我想有条件地仅在生产版本中将Google跟踪代码管理器代码添加到html的头部。我可以使用像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中没有脚本标签，那么在构建或使用webpack-dev-server时Vue如何将自身注入到索引中？

Answer 1

替代方法：

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

Answer 2

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

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

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

2 个答案: