通过htmlWebpackPlugin.options.title修改页面标题的两种方法

我们通过Vue CLI创建项目时，会自动生成public文件夹包含index.html文件，其中的title是*<%= htmlWebpackPlugin.options.title %>* 表示， 那么在使用当前表达式情况下如何修改title呢？下面写出两种方法:

1. 在 vue.config.js 中使用 pages 字段

可以使用 pages 字段来定义的标题。首先要有vue.config.js文件，没有的话在根目录创建，并将 pages 字段添加到exports中，如下所示：

代码语言：javascript复制

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js', // 入口文件
      title: '你的标题'
    }
  }
}
复制代码

2. 链接 Webpack

同样在vue.config.js文件中，可以通过链接webpack修改title，如下所示：

代码语言：javascript复制

module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].title = "你的标题";
        return args
    })
  }
}
复制代码

提示：修改完配置后，需要重新启动项目配置才会生效

网站 webpack html javascript 打包

0 人点赞