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

Question

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

Answer 1

是的，这是可行的...但反过来

1. 您可以使用 Environment Variables 定义您的应用标题
2. 然后您可以配置 htmlWebpackPlugin 使用此 ENV 变量作为 title 选项的值
3. 同时，你可以在任何客户端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
  }
}

Answer 2

document.title 可以， 也可以，格式比较冗长但更严格和灵活，看看哪一个最适合您。