vue-cli2.X：修改config目录下index.js
const title = '标题1'
// const title = '标题2'
// const title = '标题3'
module.exports = {

title: title,

dev: { ... },

build: { ... },

test: { ... }

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,

...
}),

new HtmlWebpackPlugin({

title: config.title,

...
}),
最后在index.html使用
<%= htmlWebpackPlugin.options.title %>

<%= htmlWebpackPlugin.options.title %>
如果项目需要根据title有不同的布局可以在main.js引入config并设置为全局变量
const config = require('../config/index')
new Vue({

el: '#app',

router,

components: { App },

template: '',

data () {

return {

title: config.title

}

}
})

const config = require('../config/index')
new Vue({

el: '#app',

router,

components: { App },

template: '',

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: []

}

}
}

configureWebpack: config => {

return {

title: title,

resolve: {

alias: {

'@': resolve('src')

}

},

plugins: []

}

}
}
public目录下的index.html使用
<%= webpackConfig.title %>


<%= webpackConfig.title %>