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>