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>
到此这篇关于html-webpack-plugin修改页面的title的方法的文章就介绍到这了,更多相关html-webpack-plugin修改页面的title 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验方法例子
当我们在开发应用时经常需要对表单进行校验,以确保用户输入的数据符合预期,这篇文章主要给大家介绍了关于前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验方法的相关资料,需要的朋友可以参考下2023-12-12vue v-for循环重复数据无法添加问题解决方法【加track-by=''索引''】
这篇文章主要介绍了vue v-for循环重复数据无法添加问题解决方法,结合实例形式分析了vue.js通过在v-for循环中添加track-by='索引'解决重复数据无法添加问题相关操作技巧,需要的朋友可以参考下2019-03-03
最新评论