微客导航 » 文章资讯 » html-webpack-plugin修改页面的title的方法

html-webpack-plugin修改页面的title的方法

2023-07-22 20:54:04 414

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

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

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

newHtmlWebpackPlugin({
title:config.title,
...
}),

最后在index.html使用

<%=htmlWebpackPlugin.options.title%>

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

constconfig=require('../config/index')
newVue({
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:[]
}
}
}

public目录下的index.html使用

<%=webpackConfig.title%>

到此这篇关于html-webpack-plugin修改页面的title的方法的文章就介绍到这了,更多相关html-webpack-plugin修改页面的title内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！