Vue Cli 3 生成的项目集 HTML 标题答案

【问题标题】：Vue Cli 3 Generated Project Set HTML TitleVue Cli 3 生成的项目集 HTML 标题
【发布时间】：2019-03-29 23:30:08
【问题描述】：

目前，使用 Vue CLI 3 生成项目后，标题为“Vue App”。

如果我通过 document.title 在创建的挂钩中设置标题，浏览器仍会在显示通过 document.title 设置的标题之前闪烁“Vue App”。

寻找一种方法来为 Vue CLI 3 生成的项目设置 HTML 标题，而不是先闪烁默认的“Vue App”标题。

【问题讨论】：

标签： vue.js vue-cli-3

【解决方案1】：

您可以在/public/index.html中静态设置标题。

在 index.html 中将其设置为空字符串并将更新保留在挂钩中可以消除闪烁。

【讨论】：

更喜欢动态加载
在 public/index.html 中将标题设置为空就可以了。谢谢！
@xspydr 好吧，您仍然动态设置标题，但从标题的空默认值开始，而不是错误的。
在我新创建的 Vue CLI 4 应用程序中，没有“/public/index.html”，所以我必须创建一个：<!DOCTYPE html><html lang="us"><head><title>My Title</title></head><body><div id="app"></div></body></html>
以防万一它对任何人有帮助，我出于某种原因删除了默认 index.html 并再次需要默认内容。您可以从\node_modules\@vue\cli-service\lib\config\index-default.html 获得它。它几乎完全符合@zett42 在上面的评论中显示的内容。

【解决方案2】：

你也可以通过另一种方式使用自定义 index.html，修改你的 vue.config.js：


module.exports = {
  publicPath: '/',
  chainWebpack: config => {
    config
      .plugin("html")
      .tap(args => {
        args[0].template = './public/index.html'
        return args
      })
  }
};

【讨论】：

这应该是公认的答案，因为根据项目（设置）更改标题比在实际文件中硬编码更有意义

【解决方案3】：

您可以使用下一个命令在您的package.json 中将postinstall 添加到scripts 部分： "postinstall": "cp ./public/index.html ./node_modules/@vue/cli-service/lib/config/index-default.html"

【讨论】：