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

标签 webpack vuejs2 google-tag-manager webpack-dev-server vue-cli

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

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

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

最佳答案

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

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

关于webpack - 如何在Vue应用程序的头部有条件地添加代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52400209/

相关文章:

reactjs - 我的 npm start for React 教程项目无法正常工作

javascript - Webpack 提取 SASS SCSS 到 js 或 json 文件

javascript - Google 跟踪代码管理器无法处理链接点击

vue.js - 访问计算 VueJS 的先前值

vue.js - 如何使用 vue.js 2 将 prop 传递给输入值?

javascript - 是否可以在 GA 中可靠地创建先赢自定义维度?

javascript - 使用 getElementByTagName 检索 b 的值并将其设为整数

javascript - 错误 'NODE_ENV' 未定义 no-undef eslint

javascript - 在 webpack 中包含 jquery-sparkline

javascript - Vue-resource 无法加载 express 静态文件