Vue.js开发如何修改Chrome浏览器中默认Webpack App标签页标题

这个默认的"Webpack App"是Webpack的html-webpack-plugin插件的默认配置值，根据你用的项目搭建工具，对应修改方法如下：

1. vue-cli搭建的Webpack项目 #

• 方法一：直接修改HTML模板
  找到项目根目录下public/index.html文件，直接修改<title>标签内的内容为你想要的标题即可：

  <title>自定义页面标题</title>
  

  修改后重启开发服务即可生效。
• 方法二：修改vue.config.js配置
  如果需要统一在配置文件管理，或者是多页面项目，可以在根目录vue.config.js中新增如下配置：

  module.exports = {
    chainWebpack: config => {
      config.plugin('html')
        .tap(args => {
          args[0].title = "自定义页面标题";
          return args;
        })
    }
  }
  

  改完重启开发服务生效。

2. Vite搭建的Vue项目 #

直接修改项目根目录下index.html里的<title>标签内容即可，修改后刷新页面就会生效。

动态修改标题 #

如果需要根据页面逻辑/路由动态切换标题，直接在对应代码中操作DOM即可：

document.title = "动态切换的标题"
// 路由场景可以写在全局路由守卫里，每次路由跳转后自动修改

如果修改后没有生效，先清理浏览器缓存，再重启本地开发服务即可。

内容的提问来源于stack exchange，提问作者etayluz