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

Question

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

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

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

Answer 1

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

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

Answer 2

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

Answer 3

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


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

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

Vue Cli 3 Generated Project Set HTML Title

vue.js

vue-cli-3