htmlwebpackplugin修改页面的title

vue-cli2.X：修改 config 目录下 index.js

const title = '标题 1'
// const title = '标题 2'
// const title = '标题 3'
module.exports = {
    title: title,
    dev: {...},
    build: {...},
    test: {...}

接着就可以在 webpack.dev.conf.js, webpack.prod.conf.js 中的 HtmlWebpackPlugin 使用 config.title

new HtmlWebpackPlugin({
    title: config.title,
    ...
 }),

最后在 index.html 使用

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

如果项目需要根据 title 有不同的布局可以在 main.js 引入 config 并设置为全局变量

const config = require('../config/index')
new Vue({
    el: '#app',
    router,
    components: {App},
    template: '<App/>',
    data () {
      return {title: config.title}
    }
})

vue 文件中通过 $root.title 使用即可，这样打包的时候只要切换 config 目录下的 index 一处地方就好了，不必多处修改降低出错概率。

vue-cli3.X：很简单，只要 vue.config.js 中配置

configureWebpack: config => {
    return {
        title: title,
        resolve: {
          alias: {'@': resolve('src')
          }
        },
        plugins: []}
    } 
}

public 目录下的 index.html 使用

<title><%= webpackConfig.title %></title>