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

2022-09-02 前端 1.7K

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

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

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

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

2. 链接 Webpack

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

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

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

HTML Webpack