关于vue的title标签中出现的htmlWebpackPlugin.options.title

1,282 阅读1分钟

htmlWebpackPlugin.options.title

vue-cli3.0以后的版本中,我们回见到如下图所示的代码: 代码块呈现(<%%>)定义了当呈现页时运行的内联代码或内联表达式,它的详细语法例如以下:

<%code%>//内联代码
<%=expression%>//内联表达式

使用内联代码能够定义独立的行或代码块。当然,此处代码快不是我们关注的重点。我们好奇的是htmlWebpackPlugin.options.title的值在哪里,我们如何更改这个值...

// vue.config.js 第一种修改方法
module.exports = {
  pages: {
    index: {
      entry: 'src/main.js', // 必填
      title: 'title'
    }
  }
}
// vue.config.js 第二种修改方法
module.exports = {
  chainWebpack(config) {
    config.plugin('html').tap(args => {
      args[0].title = 'title'
      return args
    })
  }
}

这个是写在vue.config.js中的,假如没有这个文件的话,在根目录创建一个,webpack在打包的时候会自动扫描是否有这个文件,并将其中的内容与已经设置好的webpack内容合并。

具体可以参考vue cli官方文档