在使用 vue cli 3 创建的项目中，在哪里可以找到或如何设置 htmlWebpackPlugin.options.title？

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

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

原文由 mayank1513 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 795

鉴于问题的受欢迎程度，我决定添加一个带有参考的详尽答案，以使其更加真实和完整。我还创建了一篇关于这个主题的文章，并在本课程和本课程中涵盖了这个主题。

虽然问题是寻找设置 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>

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

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

至

<title>Title of your choice</title>

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

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

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

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

根据 Vue 文档，您可以使用 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 中链接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 个解决方案是更改标题的静态方法，换句话说，您不能在运行时使用这些方法更改标题。此外，所有这些都不是热重装的。最后两个选项使用 JavaScript 并且可以在运行时操作标题。

原文由 mayank1513 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

在使用 vue cli 3 创建的项目中，在哪里可以找到或如何设置 htmlWebpackPlugin.options.title？

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

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

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

4. 链接 Webpack

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

6. 使用 Vue 元

结论

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？

Stack Overflow 翻译

在使用 vue cli 3 创建的项目中，在哪里可以找到或如何设置 htmlWebpackPlugin.options.title？

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

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

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

4. 链接 Webpack

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

6. 使用 Vue 元

结论

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？

Stack Overflow 翻译

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

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