Получить профессию в Skypro
Настройка title с помощью htmlWebpackPlugin в Vue CLI 3
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Для настройки title воспользуйтесь файлом vue.config.js, добавив в него следующую конфигурацию:
// vue.config.js
module.exports = {
pages: {
index: {
title: 'Заголовок вашей страницы',
},
},
};Не забудьте вставить <title><%= htmlWebpackPlugin.options.title %></title> в шаблон public/index.html для корректной работы. Для динамического изменения заголовка используйте Vue Meta или JavaScript. Подробнее об этом – ниже.
Динамическое название: способы реализации
Vue Meta: искусство управления метаданными
Vue Meta – это превосходное решение для управления метаданными в приложении Vue. Добавьте его через npm install vue-meta, подключите в main.js и настройте метаданные (включая заголовки) в компонентах:
import Vue from 'vue';
import VueMeta from 'vue-meta';
Vue.use(VueMeta);Теперь вы можете определить title в компонентах так:
export default {
metaInfo: {
title: 'Заголовок страницы',
// Здесь можно добавлять и другие мета-теги...
}
}Vue Meta поддерживает обновления в реальном времени и совместим с серверной отрисовкой (SSR).
JavaScript: быстрое изменение заголовка
Если вам требуется изменить title в процессе выполнения приложения, примените JavaScript в жизненном цикле компонента:
mounted() {
document.title = 'Динамический заголовок';
}Статическое название: прямой и надёжный способ
Непосредственная установка: верность традициям
Вы можете непосредственно указать title в файле public/index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Статический заголовок страницы</title>
</head>
<body>
<div id="app"></div>
</body>
</html>Webpack Chain: тонкая настройка конфигурации
Либо измените конфигурацию Webpack при помощи chainWebpack:
module.exports = {
chainWebpack: config => {
config.plugin('html')
.tap(args => {
args[0].title = 'Заголовок вашей страницы';
return args;
});
}
}Не забывайте перезапускать сервер после внесения изменений в vue.config.js, поскольку он не поддерживает горячую перезагрузку.
Правила хорошего тона: адекватное название – это часть UX
Выбирайте title, который будет точно соответствовать содержанию вашего приложения и легко понятен пользователю. Всегда делайте UX главным приоритетом!
Визуализация
Представьте свой проект на Vue как великолепное здание. Вот как вкладывается настройка названия:
// vue.config.js
module.exports = {
chainWebpack: (config) => {
config
.plugin('html')
.tap(args => {
args[0].title = 'Название вашего проекта'; // Устанавливаем название здесь
return args;
});
}
}Результат: ваше здание ныне гордостью носит вывеску с новым названием!
Распространенные ошибки и пути их решения
Забыли перезапустить сервер
Если изменения в vue.config.js не отображаются, необходимо перезапустить сервер, так как Webpack не обрабатывает горячую перезагрузку таких изменений.
Исчезло динамическое обновление заголовка
Если вы не замечаете изменений заголовка в реальном времени, проверьте использование Vue Meta или корректное применение document.title.
Переменная окружения не функционирует
Чтобы получить доступ к переменным окружения в Vue, используйте префикс VUE_APP_.