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 内容请搜索呐喊教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持呐喊教程！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#nhooo.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。