htmlWebpackPlugin.options.title

改变 htmlWebpackPlugin.options.title

Vue 默认的 HTML 的 title 是 htmlWebpackPlugin.options.title,那么如何进行修改呢?

在项目根目录下,创建 vue.config.js,然后这样写:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].title= '你想设置的title名字'
        return args
      })
  }
}

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

熟悉 webpack 的应该知道这是在 webpack 中使用 HtmlWebpackPlugin 的用法

plugins: [ 
    // plugins 的配置 
    // html-webpack-plugin 
    // 功能:默认会创建一个空的 HTML,自动引入打包输出的所有资源(JS/CSS) 
    // 需求:需要有结构的 HTML 文件 
    new HtmlWebpackPlugin({ 
        // 复制 './src/index.html' 文件,并自动引入打包输出的所有资源(JS/CSS) 
        template: './src/index.html' 
    }) 
],

但是 vue 并不希望我们直接操作 webpack 的配置文件,这样容易产生冲突,所以采用了一种chainWebpack的方法。