Vue3.0中项目打包后动态切换title标题

我们经常会看到vue-cli3.0的index.html中有这么一句话

 <title><%= htmlWebpackPlugin.options.title %></title>

这其中的 

htmlWebpackPlugin.options.title

表示动态显示项目最终的页面标题,需要通过vue.config,js中自己配置

配置步骤:

        1.在当前项目根目录创建vue.config.js文件

            2.然后再文件里面写上以下代码

// 第一步：引入
var htmlWepackPlugin = require('html-webpack-plugin')
module.exports = {
//  第二步  配置 plugins
  configureWebpack: {
   plugins:[
      new htmlWepackPlugin({
        // 第三步  title配置项可用于生成html的标题
        title: '蓝鸟网课',
        template: './public/index.html'  //表示模板代码所在的文件 
      })
    ]
   
    
  },
}