Quería establecer el título de mi página web creada con vue cli 3 y, por lo tanto, busqué en public/index.html . Allí encontré <title><%= htmlWebpackPlugin.options.title %></title> .
¿Cómo configuro y htmlWebpackPlugin.options.title en el proyecto vue cli 3?
crear un archivo vue.config.js en la raíz
//vue.config.js module.exports = { chainWebpack: config => { config .plugin('html') .tap(args => { args[0].title = "My Vue App"; return args; }) } }consulte https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin
Actualice la propiedad de nombre en su archivo package.json
{ "name": "URL-friendly_app-name", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" }, "dependencies": { ... }, "devDependencies": { ... }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }Actualización: el método mencionado anteriormente solo funcionará si usa un título compatible con URL.
Hay un par de otras formas de hacerlo
.env (o cualquier .env.[modo])
VUE_APP_NAME=Application flixible nameY así es como lo llamas en diferentes lugares de tu aplicación
AnyComponent.vue (como una propiedad de datos)
Mecanografiado
appName: string = process.env.VUE_APP_NAMEJavaScript
appName: process.env.VUE_APP_NAMEcualquierHTML.html
<%= process.env.VUE_APP_NAME %>Si está utilizando el complemento vue-pwa , el name se establece en el archivo site.webmanifest .
Al observar la popularidad de la pregunta, decidí agregar una respuesta elaborada con referencias para hacerla más auténtica y completa. También he creado un artículo sobre este tema y he cubierto este tema en este y este curso.
Aunque la pregunta busca configurar htmlWebpackPlugin.options.title , el efecto final es cambiar el título de la página web.
La forma más sencilla de hacer esto es modificar public/index.html y codificar el título.
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title> <%= htmlWebpackPlugin.options.title %> </title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> Este es el public/index.html predeterminado que genera vue cli. Y en esto, solo necesitas cambiar
<title> <%= htmlWebpackPlugin.options.title %> </title>para
<title>Title of your choice</title>name en package.json Otra solución simple es cambiar el "name": "your-project-name" . Sin embargo, existen muchas restricciones sobre el name que puede usar en package.json . Puedes leer más sobre esto aquí . Básicamente, package.json debe contener un nombre y debe estar en minúsculas y una palabra, y puede contener guiones y guiones bajos.
pages en vue.config.js vue.config.js es un archivo opcional que puede agregar para proporcionar configuraciones adicionales a Vue CLI y este archivo, si está presente, será cargado automáticamente por Vue CLI. Debe crear vue.config.js en la carpeta raíz, la carpeta que contiene su archivo package.json .
De acuerdo con la documentación de Vue , puede usar el campo de páginas para definir el punto de entrada para la aplicación de varias páginas. Sin embargo, también puede usar esto para definir el título de la aplicación de una sola página. Cree vue.config.js en el directorio raíz y agregue el campo de pages a sus exportaciones de la siguiente manera:
module.exports = { pages: { index: { // entry for the page entry: 'src/main.js', title: 'My Title', }, } }Tenga en cuenta que si ya está ejecutando el servidor de desarrollo, este cambio se reflejará solo cuando detenga y reinicie el servidor de desarrollo. En otras palabras, estos cambios no se recargarán en caliente.
Puede encadenar Webpack en vue.config.js como se muestra a continuación
module.exports = { chainWebpack: config => { config .plugin('html') .tap(args => { args[0].title = "My Vue App"; return args; }) } }Tenga en cuenta que, de manera similar a la solución 3, este cambio se reflejará solo cuando detenga y reinicie el servidor de desarrollo, en caso de que ya esté ejecutando el servidor de desarrollo. En otras palabras, estos cambios no se recargarán en caliente.
La siguiente solución en la lista es usar JavaScript para modificar el título. Puede hacer esto en el enlace de ciclo de vida mounted de su componente raíz o si desea un título diferente para diferentes rutas, puede hacer lo mismo para los componentes cargados por cada ruta.
<script> export default { data() { return { // }; }, mounted() { document.title = 'new title' } } </script> Finalmente, puede usar Vue Meta para administrar todos los metadatos de su aplicación Vue, incluido el título. Primero debe agregar Vue Meta a su proyecto y luego usar el campo metaInfo como se muestra a continuación para configurar los metadatos para su página o ruta.
{ metaInfo: { meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { title: 'My title'} ] } }Las primeras 4 soluciones son formas estáticas de cambiar su título o, en otras palabras, no puede cambiar su título en tiempo de ejecución usando estas formas. Además, todos estos no se recargan en caliente. Las últimas 2 opciones usan JavaScript y pueden manipular el título en tiempo de ejecución.
Simplemente asigné un valor htmlWebpackPlugin.options.title algo como esto.
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title="WebStore" %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> </body> </html>Simple y creo que la mejor manera es actualizar el nombre dentro de packer.json y necesita reiniciar su aplicación
archivo paquete.json:
{ "name": "my title app", }