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?
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 %>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
Si está utilizando el complemento vue-pwa , el name se establece en el archivo site.webmanifest .
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", }