blocks|key|678262|text|在根目录下创建一个文件vue.config.js|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|678263|//vue.config.js
module.exports+=+{
++++chainWebpack:+config+=>+{
++++++++config
++++++++++++.plugin('html')
++++++++++++.tap(args+=>+{
++++++++++++++++args[0].title+=+"My+Vue+App";
++++++++++++++++return+args;
++++++++++++})
++++}
}|code-block|syntax|javascript|678264|请参阅https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin|678265|entityMap|0|LINK|mutability|MUTABLE|url|https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin^0|B|D|0|0|3|1Y|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>create a file <code>vue.config.js</code> at the root</p>
<pre><code>//vue.config.js
module.exports = {
    chainWebpack: config =&gt; {
        config
            .plugin('html')
            .tap(args =&gt; {
                args[0].title = &quot;My Vue App&quot;;
                return args;
            })
    }
}
</code></pre>
<p>see <a href="https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin" rel="noreferrer">https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin</a></p>


blocks|key|678383|text|在您的package.json文件中更新package.json属性|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|678384|{
++"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%25",
++++"last+2+versions",
++++"not+dead"
++]
}|code-block|syntax|javascript|678385|更新:上述方法只有在使用URL友好标题时才能工作。|678386|还有其他几种方法可以做到|678387|在Vuejs正式文档页面配置中，您可以使用html插件配置来指定不同页面的标题。|unordered-list-item|678388|使用环境变量模式与环境变量来保存应用程序/页面标题。我个人更喜欢使用这种方法。|678389|.env+(或任何.env.mode)|678390|VUE_APP_NAME=Application+flixible+name|678391|这就是你在你的应用程序中不同地方的称呼。|678392|AnyComponent.vue+(作为数据属性)|678393|TypeScript|678394|appName:+string+=+process.env.VUE_APP_NAME|678395|Javascript|678396|appName:+process.env.VUE_APP_NAME|678397|anyHTML.html|678398|<%25=+process.env.VUE_APP_NAME+%25>|678399|entityMap|0|LINK|mutability|MUTABLE|url|https://cli.vuejs.org/config/#pages|1|https://cli.vuejs.org/guide/mode-and-env.html#modes^0|3|C|0|0|0|0|A|4|0|0|6|7|1|0|0|4|0|0|0|0|G|0|0|A|0|0|0|A|0|0|0|C|0|0^^$0|@$1|2|3|4|5|6|7|1N|8|@$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1Q|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1R|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|1S|8|@]|D|@]|E|$]]|$1|O|3|P|5|Q|7|1T|8|@]|D|@$9|1U|A|1V|1|1W]]|E|$]]|$1|R|3|S|5|Q|7|1X|8|@]|D|@$9|1Y|A|1Z|1|20]]|E|$]]|$1|T|3|U|5|6|7|21|8|@$9|22|A|23|B|C]]|D|@]|E|$]]|$1|V|3|W|5|H|7|24|8|@]|D|@]|E|$I|J]]|$1|X|3|Y|5|6|7|25|8|@]|D|@]|E|$]]|$1|Z|3|10|5|6|7|26|8|@$9|27|A|28|B|C]]|D|@]|E|$]]|$1|11|3|12|5|6|7|29|8|@$9|2A|A|2B|B|C]]|D|@]|E|$]]|$1|13|3|14|5|H|7|2C|8|@]|D|@]|E|$I|J]]|$1|15|3|16|5|6|7|2D|8|@$9|2E|A|2F|B|C]]|D|@]|E|$]]|$1|17|3|18|5|H|7|2G|8|@]|D|@]|E|$I|J]]|$1|19|3|1A|5|6|7|2H|8|@$9|2I|A|2J|B|C]]|D|@]|E|$]]|$1|1B|3|1C|5|H|7|2K|8|@]|D|@]|E|$I|J]]|$1|1D|3|-4|5|6|7|2L|8|@]|D|@]|E|$]]]|1E|$1F|$5|1G|1H|1I|E|$1J|1K]]|1L|$5|1G|1H|1I|E|$1J|1M]]]]

<p>Update the <strong>name</strong> property in your <strong>package.json</strong> file</p>
<pre><code>{
  &quot;name&quot;: &quot;URL-friendly_app-name&quot;,
  &quot;version&quot;: &quot;0.1.0&quot;,
  &quot;private&quot;: true,
  &quot;scripts&quot;: {
    &quot;serve&quot;: &quot;vue-cli-service serve&quot;,
    &quot;build&quot;: &quot;vue-cli-service build&quot;
  },
  &quot;dependencies&quot;: {
    ...
  },
  &quot;devDependencies&quot;: {
    ...
  },
  &quot;browserslist&quot;: [
    &quot;&gt; 1%&quot;,
    &quot;last 2 versions&quot;,
    &quot;not dead&quot;
  ]
}
</code></pre>
<p>Update:
The above mentioned method will only work if you use a URL friendly title.</p>
<p>There are a couple of other ways to do it</p>
<ul>
<li>From the Vuejs official documentation <a href="https://cli.vuejs.org/config/#pages" rel="nofollow noreferrer">Pages Configuration</a>, you can use the html plugin configuration to specify the title for different pages</li>
<li>Use the environement variables <a href="https://cli.vuejs.org/guide/mode-and-env.html#modes" rel="nofollow noreferrer">Modes and Environment Variables</a> to hold your app/page title. I personally prefer and use this method.</li>
</ul>
<p><strong>.env</strong> (or any .env.[mode])</p>
<pre><code>VUE_APP_NAME=Application flixible name
</code></pre>
<p>And this is how you call it in different places in your app</p>
<p><strong>AnyComponent.vue</strong> (as a data property)</p>
<p><strong>TypeScript</strong></p>
<pre class="lang-js prettyprint-override"><code>appName: string = process.env.VUE_APP_NAME
</code></pre>
<p><strong>Javascript</strong></p>
<pre class="lang-js prettyprint-override"><code>appName: process.env.VUE_APP_NAME
</code></pre>
<p><strong>anyHTML.html</strong></p>
<pre><code>&lt;%= process.env.VUE_APP_NAME %&gt;
</code></pre>


blocks|key|678446|text|如果您使用的是vue-pwa插件，则在site.webmanifest文件中设置name。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|678447|entityMap^0|7|7|J|G|14|4|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p>If you are using the <code>vue-pwa</code> plugin, the <code>name</code> is set within the <code>site.webmanifest</code> file.</p>


blocks|key|678501|text|考虑到这个问题的受欢迎程度，我决定添加一个详细的答案和参考，以使它更真实和完整。我还创建了关于这个主题的文章，并在这和这课程中介绍了这个主题。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|678502|虽然问题是寻找设置htmlWebpackPlugin.options.title，最终的效果是改变网页的标题。|style|CODE|678503|1.最方便和最琐碎的解决方案|678504|最简单的方法是修改public/index.html并对标题进行硬编码。|678505|<!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="<%25=+BASE_URL+%25>favicon.ico">
++++<title>
++++++++<%25=+htmlWebpackPlugin.options.title+%25>
++++</title>
</head>

<body>
++++<noscript>
++++++<strong>We're+sorry+but+<%25=+htmlWebpackPlugin.options.title+%25>+doesn't+work+properly+without+JavaScript+enabled.+Please+enable+it+to+continue.</strong>
++++</noscript>
++++<div+id="app"></div>
++++
</body>

</html>|code-block|syntax|javascript|678506|这是由vue+cli生成的默认public/index.html。在这种情况下，你只需要改变|678507|++++<title>
++++++++<%25=+htmlWebpackPlugin.options.title+%25>
++++</title>|678508|至|678509|<title>Title+of+your+choice</title>|678510|2.在name中更改package.json字段|678511|另一个简单的解决方案是更改"name":+"your-project-name"。但是，可以在name中使用的package.json有许多限制。您可以阅读更多关于这个这里的内容。基本上，package.json必须包含一个名称，它必须是小写和一个单词，并且可以包含连字符和下划线。|678512|3.+pages字段在vue.config.js中的应用|678513|vue.config.js是一个可选文件，您可以添加该文件以向Vue+CLI提供其他配置，如果存在该文件，该文件将由Vue+CLI自动加载。您需要在根文件夹中创建vue.config.js+--包含package.json文件的文件夹。|678514|根据Vue文档，您可以使用pages字段来定义多页面应用程序的切入点。但是，您也可以使用它来定义单个页面应用程序的标题。在根目录中创建vue.config.js并将pages字段添加到导出中，如下所示：|678515|module.exports+=+{
++pages:+{
++++index:+{
++++++//+entry+for+the+page
++++++entry:+'src/main.js',
++++++title:+'My+Title',
++++},
++}
}|678516|请注意，如果您已经在运行开发服务器，则只有在停止并重新启动开发服务器时才会反映此更改。换句话说，这些更改不会被重新加载。|678517|4.锁链Webpack|678518|您可以在链Webpack中使用vue.config.js，如下所示|678519|module.exports+=+{
++++chainWebpack:+config+=>+{
++++++++config
++++++++++++.plugin('html')
++++++++++++.tap(args+=>+{
++++++++++++++++args[0].title+=+"My+Vue+App";
++++++++++++++++return+args;
++++++++++++})
++++}
}|678520|请注意，与解决方案3类似，此更改仅在停止并重新启动开发服务器时才会反映出来，以防您已经在运行开发服务器。换句话说，这些更改不会被重新加载。|678521|5.使用JavaScript修改生命周期钩子中的标题|678522|列表中的下一个解决方案是使用JavaScript修改标题。您可以在根组件的mounted生命周期挂钩中这样做，或者如果您想要不同路由的不同标题，则可以对每个路由加载的组件执行相同的操作。|678523|<script>
export+default+{
++data()+{
++++return+{
++++++//
++++};
++},
++mounted()+{
++++document.title+=+'new+title'
++}
}
</script>|678524|6.使用Vue+Meta|678525|最后，您可以使用Vue+Meta来管理Vue应用程序的所有元数据，包括标题。首先，您需要将Vue+Meta添加到您的项目中，然后如下面所示使用metaInfo字段为您的页面或路由配置元数据。|678526|{
++metaInfo:+{
++++meta:+[
++++++{+charset:+'utf-8'+},
++++++{+name:+'viewport',+content:+'width=device-width,+initial-scale=1'+},
++++++{+title:+'My+title'}
++++]
++}
}|678527|结论|678528|前4种解决方案是更改标题的静态方法，换句话说，您不能使用这些方法在运行时更改标题。此外，所有这些都不是热重装。最后两个选项使用JavaScript，可以在运行时操作标题。|678529|entityMap|0|LINK|mutability|MUTABLE|url|https://medium.com/@mayank-1513/how-to-set-htmlwebpack-plugin-options-title-in-project-created-with-vue-cli-e686087646df|1|https://www.udemy.com/course/vue-3-essentials/?referralCode=E6D2FDE2B8B06C1991F1|2|https://www.udemy.com/course/vuejs-complete-course-plus-guide/?couponCode=HAPPY_LEARNING|3|https://docs.npmjs.com/creating-a-package-json-file|4|https://cli.vuejs.org/config/#pages|5|https://cli.vuejs.org/config/#chainwebpack|6|https://vue-meta.nuxtjs.org/^0|1G|2|0|1L|1|1|1N|1|2|0|9|V|0|0|9|H|0|0|F|H|0|0|0|0|3|4|A|C|0|D|R|1B|4|1J|C|2M|C|2C|2|3|0|3|5|B|D|0|0|D|29|D|2R|C|0|1V|D|2A|5|2|5|4|0|0|0|0|F|D|4|8|5|0|0|0|0|11|7|0|0|0|1Z|8|8|8|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|2K|8|@]|9|@$A|2L|B|2M|1|2N]|$A|2O|B|2P|1|2Q]|$A|2R|B|2S|1|2T]]|C|$]]|$1|D|3|E|5|6|7|2U|8|@$A|2V|B|2W|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|2X|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|2Y|8|@$A|2Z|B|30|F|G]]|9|@]|C|$]]|$1|L|3|M|5|N|7|31|8|@]|9|@]|C|$O|P]]|$1|Q|3|R|5|6|7|32|8|@$A|33|B|34|F|G]]|9|@]|C|$]]|$1|S|3|T|5|N|7|35|8|@]|9|@]|C|$O|P]]|$1|U|3|V|5|6|7|36|8|@]|9|@]|C|$]]|$1|W|3|X|5|N|7|37|8|@]|9|@]|C|$O|P]]|$1|Y|3|Z|5|6|7|38|8|@$A|39|B|3A|F|G]|$A|3B|B|3C|F|G]]|9|@]|C|$]]|$1|10|3|11|5|6|7|3D|8|@$A|3E|B|3F|F|G]|$A|3G|B|3H|F|G]|$A|3I|B|3J|F|G]|$A|3K|B|3L|F|G]]|9|@$A|3M|B|3N|1|3O]]|C|$]]|$1|12|3|13|5|6|7|3P|8|@$A|3Q|B|3R|F|G]|$A|3S|B|3T|F|G]]|9|@]|C|$]]|$1|14|3|15|5|6|7|3U|8|@$A|3V|B|3W|F|G]|$A|3X|B|3Y|F|G]|$A|3Z|B|40|F|G]]|9|@]|C|$]]|$1|16|3|17|5|6|7|41|8|@$A|42|B|43|F|G]|$A|44|B|45|F|G]]|9|@$A|46|B|47|1|48]]|C|$]]|$1|18|3|19|5|N|7|49|8|@]|9|@]|C|$O|P]]|$1|1A|3|1B|5|6|7|4A|8|@]|9|@]|C|$]]|$1|1C|3|1D|5|6|7|4B|8|@]|9|@]|C|$]]|$1|1E|3|1F|5|6|7|4C|8|@$A|4D|B|4E|F|G]]|9|@$A|4F|B|4G|1|4H]]|C|$]]|$1|1G|3|1H|5|N|7|4I|8|@]|9|@]|C|$O|P]]|$1|1I|3|1J|5|6|7|4J|8|@]|9|@]|C|$]]|$1|1K|3|1L|5|6|7|4K|8|@]|9|@]|C|$]]|$1|1M|3|1N|5|6|7|4L|8|@$A|4M|B|4N|F|G]]|9|@]|C|$]]|$1|1O|3|1P|5|N|7|4O|8|@]|9|@]|C|$O|P]]|$1|1Q|3|1R|5|6|7|4P|8|@]|9|@]|C|$]]|$1|1S|3|1T|5|6|7|4Q|8|@$A|4R|B|4S|F|G]]|9|@$A|4T|B|4U|1|4V]]|C|$]]|$1|1U|3|1V|5|N|7|4W|8|@]|9|@]|C|$O|P]]|$1|1W|3|1X|5|6|7|4X|8|@]|9|@]|C|$]]|$1|1Y|3|1Z|5|6|7|4Y|8|@]|9|@]|C|$]]|$1|20|3|-4|5|6|7|4Z|8|@]|9|@]|C|$]]]|21|$22|$5|23|24|25|C|$26|27]]|28|$5|23|24|25|C|$26|29]]|2A|$5|23|24|25|C|$26|2B]]|2C|$5|23|24|25|C|$26|2D]]|2E|$5|23|24|25|C|$26|2F]]|2G|$5|23|24|25|C|$26|2H]]|2I|$5|23|24|25|C|$26|2J]]]]

<p>Looking at the popularity of the question, I decided to add an elaborate answer with references to make it more authentic and complete. I have also created <a href="https://medium.com/@mayank-1513/how-to-set-htmlwebpack-plugin-options-title-in-project-created-with-vue-cli-e686087646df" rel="noreferrer">an article</a> on this topic and covered this topic in <a href="https://www.udemy.com/course/vue-3-essentials/?referralCode=E6D2FDE2B8B06C1991F1" rel="noreferrer">this</a> and <a href="https://www.udemy.com/course/vuejs-complete-course-plus-guide/?couponCode=HAPPY_LEARNING" rel="noreferrer">this</a> courses.</p>
<p>Though the question is looking for setting <code>htmlWebpackPlugin.options.title</code>, the ultimate effect is changing the title of the web-page.</p>
<h1>1. Most convenient and trivial solution</h1>
<p>The simplest way to do this is to modify the <code>public/index.html</code> and hard-code the title.</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;&quot;&gt;

&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1.0&quot;&gt;
    &lt;link rel=&quot;icon&quot; href=&quot;&lt;%= BASE_URL %&gt;favicon.ico&quot;&gt;
    &lt;title&gt;
        &lt;%= htmlWebpackPlugin.options.title %&gt;
    &lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;noscript&gt;
      &lt;strong&gt;We're sorry but &lt;%= htmlWebpackPlugin.options.title %&gt; doesn't work properly without JavaScript enabled. Please enable it to continue.&lt;/strong&gt;
    &lt;/noscript&gt;
    &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
    &lt;!-- built files will be auto injected --&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>
<p>This is the default <code>public/index.html</code> that is generated by vue cli. And in this, you just need to change</p>
<pre><code>    &lt;title&gt;
        &lt;%= htmlWebpackPlugin.options.title %&gt;
    &lt;/title&gt;
</code></pre>
<p>to</p>
<pre><code>&lt;title&gt;Title of your choice&lt;/title&gt;
</code></pre>
<h1>2. Change the <code>name</code> field in <code>package.json</code></h1>
<p>Another simple solution is to change the <code>&quot;name&quot;: &quot;your-project-name&quot;</code>. However, there are many restrictions on the <code>name</code> you can use in <code>package.json</code>. You can read more about this <a href="https://docs.npmjs.com/creating-a-package-json-file" rel="noreferrer">here</a>. Basically, <code>package.json</code> must contain a name and that must be lowercase and one word, and may contain hyphens and underscores.</p>
<h1>3. Using <code>pages</code> field in <code>vue.config.js</code></h1>
<p><code>vue.config.js</code> is an optional file that you can add to provide additional configurations to Vue CLI and this file, if present, will be automatically loaded by Vue CLI. You need to create <code>vue.config.js</code> in the root folder - the folder containing you <code>package.json</code> file.</p>
<p>According to <a href="https://cli.vuejs.org/config/#pages" rel="noreferrer">Vue documentation</a>, you can use pages field to define entrypoint for multi-page app. However, you can also use this to define title for single page app as well. Create <code>vue.config.js</code> in the root directory and add <code>pages</code> field to your exports as follows:</p>
<pre><code>module.exports = {
  pages: {
    index: {
      // entry for the page
      entry: 'src/main.js',
      title: 'My Title',
    },
  }
}
</code></pre>
<p>Note that if you are already running development server, this change will be reflected only when you stop and restart the development server. In other words, these changes will not be hot reloaded.</p>
<h1>4. Chaining Webpack</h1>
<p>You can <a href="https://cli.vuejs.org/config/#chainwebpack" rel="noreferrer">chain Webpack</a> in <code>vue.config.js</code> as shown below</p>
<pre><code>module.exports = {
    chainWebpack: config =&gt; {
        config
            .plugin('html')
            .tap(args =&gt; {
                args[0].title = &quot;My Vue App&quot;;
                return args;
            })
    }
}
</code></pre>
<p>Note that similar to solution 3, this change will be reflected only when you stop and restart the development server, in case you are already running development server. In other words, these changes will not be hot reloaded.</p>
<h1>5. Modify title in lifecycle hooks using JavaScript</h1>
<p>The next solution in the list is to use JavaScript to modify the title. You can do this either in <code>mounted</code> lifecycle hook of your root component or if you want different title for different routes, you can do the same for components loaded by each route.</p>
<pre><code>&lt;script&gt;
export default {
  data() {
    return {
      //
    };
  },
  mounted() {
    document.title = 'new title'
  }
}
&lt;/script&gt;
</code></pre>
<h1>6. Use Vue Meta</h1>
<p>Finally you can use <a href="https://vue-meta.nuxtjs.org/" rel="noreferrer">Vue Meta</a> to manage all metadata for your Vue app including title. First you need to add Vue Meta to your project and then use <code>metaInfo</code> field as shown below to configure metadata for your page or route.</p>
<pre><code>{
  metaInfo: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { title: 'My title'}
    ]
  }
}
</code></pre>
<h1>Conclusion</h1>
<p>The first 4 solutions are static ways of changing your title or in other words you can't change your title at runtime using these ways. Also all of these are not hot reloaded. The last 2 options use JavaScript and can manipulate the title at runtime.</p>


blocks|key|1628842|text|我只是将htmlWebpackPlugin.options.title的值赋值如下所示。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1628843|<!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="<%25=+BASE_URL+%25>favicon.ico">
++++<title><%25=+htmlWebpackPlugin.options.title="WebStore"+%25></title>
++</head>
++<body>
++++<noscript>
++++++<strong>We're+sorry+but+<%25=+htmlWebpackPlugin.options.title+%25>+doesn't+work+properly+without+JavaScript+enabled.+Please+enable+it+to+continue.</strong>
++++</noscript>
++++<div+id="app"></div>
++++
++++<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>|code-block|syntax|javascript|1628844|entityMap^0|4|V|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>I have simply assigned value fo <code>htmlWebpackPlugin.options.title</code> something like this.</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1.0&quot;&gt;
    &lt;link rel=&quot;icon&quot; href=&quot;&lt;%= BASE_URL %&gt;favicon.ico&quot;&gt;
    &lt;title&gt;&lt;%= htmlWebpackPlugin.options.title=&quot;WebStore&quot; %&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;noscript&gt;
      &lt;strong&gt;We're sorry but &lt;%= htmlWebpackPlugin.options.title %&gt; doesn't work properly without JavaScript enabled. Please enable it to continue.&lt;/strong&gt;
    &lt;/noscript&gt;
    &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
    &lt;!-- built files will be auto injected --&gt;
    &lt;script type=&quot;module&quot; src=&quot;https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js&quot;&gt;&lt;/script&gt;
    &lt;script nomodule src=&quot;https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|571172|text|很简单，我认为最好的方法是在packer.json中更新名称，您需要重新启动应用程序。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|571173|package.json文件：|571174|{
++"name":+"my+title+app",
}|code-block|syntax|javascript|571175|entityMap^0|E|B|S|2|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>Simple and I think the best way is to update the <strong>name</strong> inside the <strong>packer.json</strong> and you need to restart your app</p>
<p><em>package.json file:</em></p>
<pre><code>{
  &quot;name&quot;: &quot;my title app&quot;,
}
</code></pre>


blocks|key|678598|text|只需使用绿色检查来更正其中一个脚本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|678599|<script>
export+default+{
++data()+{
++++return+{
++++++//
++++};
++}
++mounted()+{
++++document.title+=+'new+title'
++}
}
</script>|code-block|syntax|javascript|678600|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Just correcting one of the scripts with the green check</p>
<pre><code>&lt;script&gt;
export default {
  data() {
    return {
      //
    };
  }
  mounted() {
    document.title = 'new title'
  }
}
&lt;/script&gt;
</code></pre>


blocks|key|571202|text|如果您使用的是vue路由器，您可以通过路由器的索引文件进行操作。在router.beforeEach方法中，只需将document.title更改为路由标题即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|571203|const+DefaultPageTitle+=+"Default+title"

const+routes:+Array<RouteRecordRaw>+=+[
++++{
++++++++path:+"/",
++++++++name:+"home",
++++++++meta:+{
++++++++++++title:+"Your+Title"
++++++++},
++++},
}

const+router+=+createRouter({
++++history:+createWebHistory(),
++++routes
})

router.beforeEach((to,+from,+next)+=>+{
++++setPageTitle(to);
++++next();
});

function+setPageTitle(to:+RouteLocationNormalized)+{
++++const+hasMetaTitleString+=+typeof+to.meta.title+==+'string';
++++if+(!hasMetaTitleString)+{
++++++++return+document.title+=+DefaultPageTitle;
++++}

++++return+document.title+=+to.meta.title+as+string;
}|code-block|syntax|javascript|571204|entityMap^0|X|H|1L|E|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>If you're using vue router you can do it through the router's index file. In the <code>router.beforeEach</code> method you just have to change the <code>document.title</code> to your routes title.</p>
<pre class="lang-js prettyprint-override"><code>const DefaultPageTitle = &quot;Default title&quot;

const routes: Array&lt;RouteRecordRaw&gt; = [
    {
        path: &quot;/&quot;,
        name: &quot;home&quot;,
        meta: {
            title: &quot;Your Title&quot;
        },
    },
}

const router = createRouter({
    history: createWebHistory(),
    routes
})

router.beforeEach((to, from, next) =&gt; {
    setPageTitle(to);
    next();
});

function setPageTitle(to: RouteLocationNormalized) {
    const hasMetaTitleString = typeof to.meta.title == 'string';
    if (!hasMetaTitleString) {
        return document.title = DefaultPageTitle;
    }

    return document.title = to.meta.title as string;
}
</code></pre>


<p>I wanted to set title to my webpage created with vue cli 3 and thus looked into <code>public/index.html</code>. There, I found <code>&lt;title&gt;&lt;%= htmlWebpackPlugin.options.title %&gt;&lt;/title&gt;</code>.</p>

<p>How do I set and modify <code>htmlWebpackPlugin.options.title</code> in vue cli 3 project?</p>


where to find or how to set htmlWebpackPlugin.options.title in project created with vue cli 3?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想为用vue cli 3创建的网页设置标题，从而查看public/index.html。在那里，我找到了<title><%= htmlWebpackPlugin.options.title %></title>。如何在vue cli 3项目中设置和修改htmlWebpackPlugin.options.title？

问如何在用vue cli 3创建的项目中找到或设置htmlWebpackPlugin.options.title？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在用vue cli 3创建的项目中找到或设置htmlWebpackPlugin.options.title？EN