【问题标题】：where to find or how to set htmlWebpackPlugin.options.title in project created with vue cli 3?在使用 vue cli 3 创建的项目中，在哪里可以找到或如何设置 htmlWebpackPlugin.options.title？
【发布时间】：2020-09-13 08:13:08
【问题描述】：

我想为使用 vue cli 3 创建的网页设置标题，因此查看了public/index.html。在那里，我找到了<title><%= htmlWebpackPlugin.options.title %></title>。

vue cli 3项目中如何设置和修改htmlWebpackPlugin.options.title？

【问题讨论】：

可以通过pages进行配置。

标签： javascript node.js vue.js vue-cli-3 vue-cli-4

【解决方案1】：

在根目录下创建一个文件vue.config.js

//vue.config.js
module.exports = {
    chainWebpack: config => {
        config
            .plugin('html')
            .tap(args => {
                args[0].title = "My Vue App";
                return args;
            })
    }
}

见https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin

【讨论】：

以上答案完美，只记得重启你的npm或yarn
为什么不在index.html 中添加<title></title> 标签？
@jeand'arme 它是相关的 SPA 逻辑。在每条更改的路线上，标题都被认为已更改

【解决方案2】：

更新 package.json 文件中的 name 属性

{
  "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"
  ]
}

更新：上述方法仅在您使用 URL 友好标题时才有效。

还有其他几种方法可以做到这一点

从Vuejs官方文档Pages Configuration可以使用html插件配置指定不同页面的标题
使用环境变量Modes and Environment Variables 来保存您的应用/页面标题。我个人更喜欢并使用这种方法。

.env（或任何 .env.[mode]）

VUE_APP_NAME=Application flixible name

这就是您在应用中不同位置的调用方式

AnyComponent.vue（作为数据属性）

TypeScript

appName: string = process.env.VUE_APP_NAME

Javascript

appName: process.env.VUE_APP_NAME

anyHTML.html

<%= process.env.VUE_APP_NAME %>

【讨论】：

package.json 不支持不兼容 url 的名称
确实如此。我正在更新答案以显示更多选项。

【解决方案3】：

如果您使用vue-pwa 插件，name 将在site.webmanifest 文件中设置。

【讨论】：

【解决方案4】：

鉴于问题的受欢迎程度，我决定添加一个带有参考的详尽答案，以使其更加真实和完整。我还为此主题创建了an article，并在this 和this 课程中介绍了这个主题。

虽然问题是寻找设置htmlWebpackPlugin.options.title，但最终的效果是改变网页的标题。

1。最方便和最简单的解决方案

最简单的方法是修改public/index.html 并硬编码标题。

<!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>

这是 vue cli 生成的默认 public/index.html。而在这方面，你只需要改变

    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>

到

<title>Title of your choice</title>

2。更改`package.json` 中的`name` 字段

另一个简单的解决方案是更改"name": "your-project-name"。但是，您可以在package.json 中使用的name 有很多限制。您可以阅读有关此here 的更多信息。基本上，package.json 必须包含一个名称，并且必须是小写字母和一个单词，并且可以包含连字符和下划线。

3。在`vue.config.js` 中使用`pages` 字段

vue.config.js 是一个可选文件，您可以添加该文件以向 Vue CLI 提供额外的配置，如果存在此文件，Vue CLI 将自动加载该文件。您需要在根文件夹中创建vue.config.js - 包含您的package.json 文件的文件夹。

根据Vue documentation，您可以使用 pages 字段来定义多页应用程序的入口点。但是，您也可以使用它来定义单页应用程序的标题。在根目录中创建vue.config.js，并将pages 字段添加到您的导出中，如下所示：

module.exports = {
  pages: {
    index: {
      // entry for the page
      entry: 'src/main.js',
      title: 'My Title',
    },
  }
}

请注意，如果您已经在运行开发服务器，则只有在您停止并重新启动开发服务器时才会反映此更改。换句话说，这些更改不会被热重载。

4。链接 Webpack

你可以在vue.config.js中chain Webpack如下图所示

module.exports = {
    chainWebpack: config => {
        config
            .plugin('html')
            .tap(args => {
                args[0].title = "My Vue App";
                return args;
            })
    }
}

请注意，与解决方案 3 类似，此更改仅在您停止并重新启动开发服务器时才会反映，以防您已经在运行开发服务器。换句话说，这些更改不会被热重载。

5。使用 JavaScript 修改生命周期钩子中的标题

列表中的下一个解决方案是使用 JavaScript 修改标题。您可以在根组件的 mounted 生命周期钩子中执行此操作，或者如果您希望为不同的路由提供不同的标题，您可以对每个路由加载的组件执行相同的操作。

<script>
export default {
  data() {
    return {
      //
    };
  },
  mounted() {
    document.title = 'new title'
  }
}
</script>

6。使用 Vue 元

最后，您可以使用Vue Meta 来管理您的 Vue 应用程序的所有元数据，包括标题。首先您需要将 Vue Meta 添加到您的项目中，然后使用metaInfo 字段如下所示为您的页面或路由配置元数据。

{
  metaInfo: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { title: 'My title'}
    ]
  }
}

结论

前 4 种解决方案是更改标题的静态方法，换句话说，您无法在运行时使用这些方法更改标题。此外，所有这些都不是热重装的。最后 2 个选项使用 JavaScript，并且可以在运行时操作标题。

【讨论】：

这是一个绝对惊人的答案。 ?
谢！！很好的答案！
Vue Meta 非常棒，对我来说是完美的解决方案！
出于某种原因，上述解决方案似乎都不适用于我的 Vue 3 / Vue CLI 4 项目。最后，我能够使用@vueuse/head 更新标题以及其他元信息

【解决方案5】：

我只是简单地为 htmlWebpackPlugin.options.title 赋值。

<!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>

【讨论】：

1。最方便和最简单的解决方案

2。更改package.json 中的name 字段

3。在vue.config.js 中使用pages 字段

4。链接 Webpack

5。使用 JavaScript 修改生命周期钩子中的标题

6。使用 Vue 元

结论

2。更改`package.json` 中的`name` 字段

3。在`vue.config.js` 中使用`pages` 字段