Vue Cli 3 生成的项目集 HTML 标题
Posted
技术标签:
【中文标题】Vue Cli 3 生成的项目集 HTML 标题【英文标题】：Vue Cli 3 Generated Project Set HTML Title 【发布时间】：2019-03-29 23:30:08 【问题描述】：目前，使用 Vue CLI 3 生成项目后，标题为“Vue App”。
如果我通过 document.title 在创建的挂钩中设置标题，浏览器仍会在显示通过 document.title 设置的标题之前闪烁“Vue App”。
寻找一种方法来为 Vue CLI 3 生成的项目设置 html 标题，而不是先闪烁默认的“Vue App”标题。
【问题讨论】：
【参考方案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"
【讨论】：
以上是关于Vue Cli 3 生成的项目集 HTML 标题的主要内容，如果未能解决你的问题，请参考以下文章
如何将 cdn css 文件添加到 Vue Cli 3 项目？
vue-cli3项目npm run build --report不生成分析图