修改 Vue CLI 3 中的 HTML 标题：告别“Vue App”闪现问题

修改 Vue CLI 3 中的 HTML 标题，告别“Vue App”闪现问题

问题

在使用 Vue CLI 3 创建项目时，默认的 HTML 标题设置为“Vue App”。当您在 created 钩子中使用 document.title 设置标题时，浏览器仍然会在显示通过 document.title 设置的标题之前，闪现“Vue App”。

解决方案

为了解决这个问题，我们可以采用以下方法：

1. 修改 public/index.html 中的标题

打开 public/index.html 文件，找到 `

将 “Your Project Title” 替换为您项目的实际标题。

**2. 使用 `meta` 标签** 

在 `public/index.html` 中添加一个 `<meta>` 标签，以指定
```html
<meta name="title" content="Your Project Title">

3. 使用 Vuex 存储

使用 Vuex 存储标题是一种更具动态性的方法：

• 在 store/index.js 中创建模块：

const titleModule = {
  state: {
    title: 'Your Project Title'
  },
  getters: {
    getTitle: state => state.title
  },
  mutations: {
    setTitle: (state, title) => {
      state.title = title
    }
  }
}

• 在 Vue 组件中，使用 mapGetters 辅助函数获取

computed: {
  ...mapGetters(['getTitle'])
}

• 使用 setTitle 提交，在需要时动态更新

this.$store.commit('setTitle', 'New Title')

4. 使用 Nuxt.js

Nuxt.js 是一个基于 Vue.js 的框架，提供了更好的 SEO 功能，它允许在 nuxt.config.js 中设置

export default {
  head: {
    title: 'Your Project Title'
  }
}

结论

通过遵循这些方法，您可以在不闪现“Vue App”标题的情况下，修改 Vue CLI 3 中生成的项目的 HTML 标题。

常见问题解答

1. 为什么会出现“Vue App”闪现问题？

当您使用 document.title 设置标题时，浏览器会使用一个内部队列来处理标题更新。如果队列中还有其他更新正在进行，浏览器就会在显示新标题之前显示队列中的第一个更新。

2. 修改 public/index.html 的方法是否会影响应用程序的 SEO？

不会。搜索引擎会抓取 <title> 标签中的内容作为页面的标题，因此修改 public/index.html 中的标题会影响应用程序的 SEO。

3. 何时使用 meta 标签比使用 document.title 更好？

使用 meta 标签的优点是它不会触发浏览器的内部队列。这对于需要立即更新标题的情况非常有用。

4. 如何使用 Vuex 存储动态更新标题？

您可以创建 Vuex 模块来存储标题状态，然后使用 mapGetters 辅助函数获取标题并使用 commit 方法动态更新标题。

5. Nuxt.js 如何处理 HTML 标题？

Nuxt.js 使用 Vuetify 作为其默认的 UI 框架，Vuetify 会自动处理 HTML 标题。您可以在 nuxt.config.js 文件中设置标题，该标题将被用作页面的 <title> 标签。