Как условно добавить код в шапку приложения Vue
Я сделал простое приложение Vue с помощью Vue CLI, и теперь я хочу добавить код Google Tag Manager в заголовок html условно только для производственной сборки. Я мог бы сделать это с серверным языком, таким как php, поэтому я попытался изменить index.html на index.php, но когда я создаю проект, он выводит index.html с введенным приложением и index.php без приложения, введенного в папку dist. Код php также не работает с webpack-dev-сервером в vue cli.
Как я могу интегрировать некоторый код на стороне сервера (он не обязательно должен быть php) в индекс приложения vue, созданный vue cli, чтобы условно добавить код диспетчера тегов для производственной сборки? Я не уверен, как выполняется процесс сборки vue cli. Могу я сказать ему использовать другой index.html для производственной сборки?
Дополнительно: мне интересно узнать больше о процессе сборки vue cli. бывший. В шаблоне index.html нет тега сценария, так как же Vue внедряется в индекс при создании или использовании webpack-dev-server?
Специально для вашей цели есть плагин vue-analytics. В плагине есть возможность отключить его во время разработки, вы должны проверить это: matteogabriele.gitbooks.io/vue-analytics/content/docs/…
@ MátéWiszt Я бы не хотел изменять связанный index.html после сборки. Мне нужно будет изучить SSR и нагрузку на сервер PHP. Спасибо за ссылку на плагин.
Да, вам никогда не следует изменять связанный index.html, потому что он всегда будет автоматически сгенерирован, поэтому все ваши изменения исчезнут, я просто упомянул его, чтобы привлечь ваше внимание к шаблону, в который вы можете добавлять вещи.
Ответы 2
Я только что видел в документация vue cli, что страница index.html обрабатывается веб-пакетом. Это означает, что я могу использовать синтаксис шаблона lodash, чтобы легко добавлять теги в заголовок только на продакшене.
<head>
...
<%= process.env.NODE_ENV === 'production' ? '<script>...</script>' : '' %>
...
</head>
@AlexanderKim, он работает над v 3.2.1, так что он должен работать и на v 3.0.5 ...
Более важный вопрос: работает ли этот синтаксис и в компонентах .vue? Я хочу создать несколько флагов сборки и условно распечатать html в теге <template tag> или скрипты в теге <script>, это сработает?
альтернативный метод:
<% if (process.env.NODE_ENV === 'production') { %>
<script>...</script>
<% } %>
Обратите внимание, что у вас должно быть два файла index.hmtl: один шаблон и один в комплекте. Пакет должен находиться в вашей папке src и содержать файлы js и css с хешами фрагментов в конце. Один шаблон находится в вашей корневой папке (где находится ваш package.json). Возможно, вы это уже знаете, но в Vue.js есть полное руководство по рендерингу на стороне сервера: ssr.vuejs.org