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


Posted in Javascript onJune 18, 2020

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 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript对象的property和prototype是这样一种关系
Mar 24 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
基于json的jquery地区联动效果代码
Jul 06 Javascript
js三种排序算法分享
Aug 16 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
javascript中数组的常用算法深入分析
Mar 12 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
vue实现购物车结算功能
Jun 18 #Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 #Javascript
javascript实现文字跑马灯效果
Jun 18 #Javascript
node.js +mongdb实现登录功能
Jun 18 #Javascript
VSCode launch.json配置详细教程
Jun 18 #Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 #Javascript
通过实例了解JS执行上下文运行原理
Jun 17 #Javascript
You might like
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
event.X和event.clientX的区别分析
2011/10/06 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
如何快速上手Vuex
2017/02/14 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
详解vue-cli官方脚手架配置
2018/07/20 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
python中文编码问题小结
2014/09/28 Python
Python列表切片用法示例
2017/04/19 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
python将字母转化为数字实例方法
2019/10/04 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
python集合删除多种方法详解
2020/02/10 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
python右对齐的实例方法
2020/07/05 Python
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
高级文秘工作总结的自我评价
2013/09/28 职场文书
自我评价怎么写正确呢?
2013/12/02 职场文书
党员的自我评价范文
2014/01/02 职场文书
计划生育证明书写要求
2014/09/17 职场文书
暑假安全保证书
2015/02/28 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技