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

更新時間：2020年06月18日 14:13:48 作者：余命三日Coder

這篇文章主要介紹了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>

如果項目需要根據(jù)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 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

一文詳解Vue-組件自定義事件(綁定和解綁)
這篇文章主要介紹了Vue-組件自定義事件的綁定和解綁，文中有詳細的圖文實例，對學習或工作有一定的參考價值，需要的小伙伴可以閱讀下
2023-05-05
對vue2.0中.vue文件頁面跳轉之.$router.push的用法詳解
今天小編就為大家分享一篇對vue2.0中.vue文件頁面跳轉之.$router.push的用法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
Vue組件上使用v-model之單選框
這篇文章主要介紹了Vue組件上使用v-model之單選框,代碼分為子組件內(nèi)容和父組件內(nèi)容，本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-10-10
VUE指令和pinia控制按鈕權限示例詳解
這篇文章主要為大家介紹了VUE指令和pinia控制按鈕權限示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-09-09
vue+element樹形選擇器組件封裝和使用方式
這篇文章主要介紹了vue+element樹形選擇器組件封裝和使用方式，具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2020-04-04
Vue使用pdf-lib實現(xiàn)為文件流添加水印并預覽
這篇文章主要為大家詳細介紹了Vue如何使用pdf-lib實現(xiàn)為文件流添加水印并預覽的功能，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起了解一下
2023-03-03
nuxt3中server routes的使用詳解
本文主要介紹了nuxt3中server routes的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-05-05
使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實例
今天小編就為大家分享一篇使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
詳解如何優(yōu)雅的進行Vue的狀態(tài)管理
隨著項目的發(fā)展和復雜性的增加,對 Vuex 進行更深入的了解和使用就變得非常重要,本篇文章將帶您探索 Vuex 的進階使用,包括模塊化、命名空間、getter 的高級用法等,需要的朋友可以參考下
2023-09-09
vue指令做滾動加載和監(jiān)聽等
這篇文章主要介紹了vue指令做滾動加載和監(jiān)聽等，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-05-05