如何在 Vue CLI 3 项目中自定义网页标题，提高 SEO 和用户体验？

vue.js

2024-03-12 19:53:53

在 Vue CLI 3 项目中自定义网页标题

引言

网页标题对于用户体验至关重要，它可以吸引注意力、提供网站概述并提高搜索引擎优化（SEO）。本指南将介绍如何在 Vue CLI 3 项目中查找和设置 htmlWebpackPlugin.options.title，从而自定义网页标题。

查找 `htmlWebpackPlugin.options.title`

htmlWebpackPlugin.options.title 值存储在项目根目录下的 public/index.html 文件中。在这个文件中，你会发现以下代码：

这表明 HTML 文件的标题是由 htmlWebpackPlugin.options.title 的值决定的。

设置 `htmlWebpackPlugin.options.title`

有两种方法可以设置 htmlWebpackPlugin.options.title：

方法 1：使用 vue.config.js

在项目根目录下创建 vue.config.js 文件，并添加以下代码：

module.exports = {
  configureWebpack: {
    plugins: [
      new HtmlWebpackPlugin({
        options: {
          title: '你的自定义标题'
        }
      })
    ]
  }
}

这将将 htmlWebpackPlugin.options.title 设置为 "你的自定义标题"。

方法 2：使用 package.json

在 package.json 文件中添加以下代码：

{
  "vue": {
    "configureWebpack": {
      "plugins": [
        {
          "use": "html-webpack-plugin",
          "options": {
            "title": '你的自定义标题'
          }
        }
      ]
    }
  }
}

这与方法 1 的效果相同。

注意

确保使用最新版本的 Vue CLI 和 htmlWebpackPlugin。
你还可以使用其他选项来自定义 HTML 文件，如 meta 和 link 标签。有关更多信息，请参阅 htmlWebpackPlugin 文档。

常见问题解答

如何使用其他 HTMLWebpackPlugin 选项？

在 vue.config.js 或 package.json 文件中的 HtmlWebpackPlugin 插件中添加其他选项即可。
我的标题没有更新，是怎么回事？

确保已经保存了配置文件并重新启动了开发服务器。
如何设置动态标题？

使用 Vuex 或其他状态管理工具在组件中设置标题，并在 public/index.html 中使用插值语法进行访问。
如何为不同页面设置不同的标题？

使用 HtmlWebpackPlugin 的 chunks 选项，根据加载的代码块设置标题。
如何优化标题的 SEO？

遵循 SEO 最佳实践，如使用简洁且相关的标题，并避免关键词堆砌。