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 相关文章推荐
判断控件是否已加载完成的代码
Feb 24 Javascript
通过DOM脚本去设置样式信息
Sep 19 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
Vue单文件组件基础模板小结
Aug 10 Javascript
用ES6写全屏滚动插件的示例代码
May 02 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
js判断密码强度的方法
Mar 18 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 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更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
9个JavaScript评级/投票插件
2010/01/18 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
Python抓取百度查询结果的方法
2015/07/08 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
Python实现命令行通讯录实例教程
2016/08/18 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
巧克力蛋糕店创业计划书
2014/01/14 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
会计专业自荐信范文
2015/03/05 职场文书
演讲开场白和结束语
2015/05/29 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
AJAX学习笔记
2021/05/18 Javascript