如何在 Vue SFC 模板中使用 `htmlWebpackPlugin.options.title`？答案

【问题标题】：How to use `htmlWebpackPlugin.options.title` inside Vue SFC template?如何在 Vue SFC 模板中使用 `htmlWebpackPlugin.options.title`？
【发布时间】：2020-12-08 10:18:12
【问题描述】：

我想在SFC模板中使用htmlWebpackPlugin.options.title，可行吗？

【问题讨论】：

标签： vue.js webpack vue-cli

【解决方案1】：

是的，这是可行的......但其他方式

您可以使用Environment Variables 定义您的应用标题
然后您可以配置htmlWebpackPlugin 使用此ENV 变量作为title 选项的值
同时，您可以在任何客户端JS（无论是纯JS还是SFC）中使用这个变量。请注意，要在模板中使用它，必须分配它先到data...

.env file VUE_APP_TITLE=我的应用标题

vue.config.js

module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].title = process.ENV.VUE_APP_TITLE
        return args
      })
  }
}

SFC

data() {
  return {
    title: process.ENV.VUE_APP_TITLE
  }
}

【讨论】：

非常有趣，令我惊讶的是，我发现 document.title 也能胜任这项工作 XD

【解决方案2】：

document.title 可以，Michal's solution 也可以采用冗长但更严格和灵活的格式，看看哪一个最适合您。

【讨论】：