Dev Faq
1
votes

Comment modifier le titre initialement généré après la création du fichier dans index.html

J'ai téléchargé un modèle vue.js sur le Web. Chaque fois que je construis des fichiers via npm, le titre de l'index.html continue d'être échangé avec le nom du modèle. Existe-t-il un moyen de modifier le titre par défaut?

6 commentaires

Pouvez-vous fournir plus de détails sur votre modèle vue.js? Il semble que cela pourrait être un problème vue-router / vue-metat. À quoi ressemble la partie de votre index.html?</p> <hr> <p>La partie titre est le nom du modèle. Modèle que j'utilise, j'ai appelé le thème du virus par le créateur Tim.</p> <hr> <p><code> document.title </code>? Ou vous voulez dire changer le titre lorsque l'index.html est généré?</p> <hr> <p>@ user3402600 veuillez ajouter du code afin que je puisse vous aider à résoudre le problème. Sans code, il sera très difficile de diagnostiquer et de résoudre votre problème.</p> <hr> <p>Je ne sais pas ce que je recherche. J'ai essayé de rechercher le titre qui apparaît dans la balise <title> sur la page index.html mais je ne le trouve tout simplement pas.</p> <hr> <p>@AndrewShmig le titre lorsque index.html est généré</p> <hr> </div> </div> </div> <div class=""> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="2186005983" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <!-- Answers --> <p class="mt-4 font-weight-bold">3 Réponses :</p> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 1<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Si je comprends bien votre question - vous devez configurer votre fichier <code> vue.config.js </code> quelque chose comme ceci (faites attention à la partie <code> Webpack </code>) - <strong> ces fichiers proviennent d'un projet en cours de fonctionnement, vous avez donc une compréhension maximale de son apparence à la fin </strong>: <pre> <title><%= htmlWebpackPlugin.options.title %></title> </pre><p> Et après avoir mis à jour votre <code> vue.config.js code>, modifiez votre fichier de modèle <code> index.html </code> pour qu'il ressemble à ceci: </code></p><pre><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title><%= htmlWebpackPlugin.options.title %></title> <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet"> <script type="text/javascript" src="../js/go.js"></script> <script type="text/javascript" src="../js/momentjs.js"></script> <script type="text/javascript" src="../js/webphone/flashphoner.js"></script> <script type="text/javascript" src="../js/webphone/SoundControl.js"></script> </head> <body> <div id="app"></div> </body> </html> </pre><p> Faites attention à ce qui est inclus dans <code> </code> -tag: </p><pre>module.exports = { baseUrl: '/', outputDir: (process.env.NODE_ENV === 'production' ? '../web/' : '../web/js/'), indexPath: '../app/Resources/views/index.html.twig', // Setting this to false can speed up production builds if you don't need source maps for production. productionSourceMap: false, // By default, generated static assets contains hashes in their filenames for better caching control. // However, this requires the index HTML to be auto-generated by Vue CLI. If you cannot make use of the index HTML // generated by Vue CLI, you can disable filename hashing by setting this option to false, filenameHashing: false, lintOnSave: false, // https://cli.vuejs.org/ru/config/#devserver-proxy devServer: {}, // https://cli.vuejs.org/ru/config/#chainwebpack chainWebpack: config => { config .plugin('html') .tap(args => { args[0].title = 'Ojok Deep Sales Platform'; args[0].template = './index.html.template'; return args; }) } }; </pre><p> Après avoir généré un nouveau fichier <code> index.html </code>, votre titre doit être défini sur ce que vous avez écrit dans args [0] .title option. </p><p> J'espère que cela vous aidera. </p></p> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">2 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> Merci pour votre réponse. Je n'ai pas de fichier vue.config.js. J'ai .eslintrc.js sans référence au titre. Le temlplate que j'utilise est ici: <a href="https://github.com/creativetimofficial/vue-material-dashboard" rel="nofollow noreferrer"> github.com/creativetimofficial/vue-material-dashboard</a > </p> <hr> <p class="answer-comment"> @ user3402600, vous pouvez en créer un <code> vue.config.js </code>, docs: <a href = "https://cli.vuejs.org/config/#global-cli-config" rel = "nofollow noreferrer "> cli.vuejs.org/config/#global-cli-config </a> </p> <hr> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Je suis encore nouveau chez VueJS, mais voici mes découvertes. J'adorerais toutes les options ou améliorations suggérées. J'ai opté pour l'option n ° 2. <p> Option 1: définie pour le mode Pages multiples vue.config.js </p><pre><script> export default { title () { return `Foo Page — ${this.someValue}` }, data () { return { someValue: 'bar' } } } </script> </pre><p> Option 2: titleMixin (référencé depuis <a href="https://medium.com/@Taha_Shashtari/the-easy-way-to%20-change-page-title-in-vue-6caf05006863%20" rel=" nofollow noreferrer "> https://medium.com/@Taha_Shashtari/the-easy-way-to-change-page-title-in-vue-6caf05006863 </a>) </p><p> <strong> titleMixin.js </strong> ajouté au dossier mixins </p><pre><script> export default { title: 'Foo Page' } </script> </pre><p> <strong> ajouté à main.js </strong></p><pre>import titleMixin from './mixins/titleMixin' Vue.mixin(titleMixin) </pre><p> <strong> Utilisation dans les pages de composants </strong> </p><pre>function getTitle (vm) { const { title } = vm.$options if (title) { return typeof title === 'function' ? title.call(vm) : title } } export default { created () { const title = getTitle(this) if (title) { document.title = title } } } </pre><p> <strong> Utilisation dans Vue instance avec une fonction </strong> </p><pre>module.exports = { pages: { index: { entry: 'src/main.js', // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title> title: 'My Website Title', }, } } </pre></p> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <h2> Option 1: <p> Modifiez votre <code> /public/index.html </code> et remplacez ceci: </p><pre><title><%= htmlWebpackPlugin.options.title %></title> </pre><p> par ceci: </p><pre>module.exports = { chainWebpack: config => { config.plugin('html').tap(args => { args[0].title = 'Your Title Here'; return args; }); } } </pre><h2> Option 2: </h2><p> <strong> vue.config.js </strong> </p><pre><title>Your Title Here</title> </pre><p> <strong> /public/index.html </strong> </p><pre><title><%= htmlWebpackPlugin.options.title %></title> </pre></h2> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> </div> <div class="col-lg-3 col-md-12 col-12 col-sm-12" > <div class="related"> <iframe src="https://rcm-eu.amazon-adsystem.com/e/cm?o=8&p=12&l=ez&f=ifr&linkID=b777da379e25dfc65f34887292b82918&t=birdy0c-21&tracking_id=birdy0c-21" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe> <p class="font-weight-bold">Articles qui pourrait vous intéresser :</p> <a href="/question/comprendre-la-liaison-bidirectionnelle-vue-js-v-model" class=""> Comprendre la liaison bidirectionnelle Vue JS v-model </a> <hr> <a href="/question/ajouter-une-variable-globale-dans-vue-js-3" class=""> Ajouter une variable globale dans Vue.js 3 </a> <hr> <a href="/question/vue-attendant-les-donn-eacute-es-des-accessoires-avant-de-les-utiliser" class=""> Vue attendant les données des accessoires avant de les utiliser </a> <hr> <a href="/question/vuejs-comment-masquer-le-composant-global-par-exemple-la-barre-de-navigation-sur-certaines-routes" class=""> VueJs - Comment masquer le composant global (par exemple la barre de navigation) sur certaines routes? </a> <hr> </div> <div class=""> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="4267220326" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <script type="text/javascript" src="/js/purecookie.js"></script> </div> <div class="container col-lg-8 col-md-12 ads-footer"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="5580301997" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </body> <footer> <div class="row col-lg-12 col-md-12 text-muted"> © 2020 www.devfaq.fr - Licensed under <a href="https://creativecommons.org/licenses/by-sa/3.0/" rel="license"> cc by-sa 3.0 </a>  with <a href="https://stackoverflow.blog/2009/06/25/attribution-required/" rel="license"> attribution required</a>. </div> </footer> </html>