html-webpack-plugin修改頁面的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>