快捷導(dǎo)航

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

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

這篇文章主要介紹了html-webpack-plugin修改頁面的title的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

vue-cli2.X：修改config目錄下index.js

const title = '標(biāo)題1'
// const title = '標(biāo)題2'
// const title = '標(biāo)題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并設(shè)置為全局變量

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>

到此這篇關(guān)于html-webpack-plugin修改頁面的title的方法的文章就介紹到這了,更多相關(guān)html-webpack-plugin修改頁面的title 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue 使某個組件不被 keep-alive 緩存的方法
今天小編就為大家分享一篇vue 使某個組件不被 keep-alive 緩存的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue新玩法VueUse工具庫具體用法@vueuse/core詳解
這篇文章主要介紹了vue新玩法VueUse-工具庫@vueuse/core,VueUse不是Vue.use，它是一個基于?Composition?API?的實用函數(shù)集合，下面是具體的一些用法，需要的朋友可以參考下
2022-08-08
Vue中keep-alive組件作用詳解
這篇文章主要為大家詳細介紹了Vue中keep-alive組件的作用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-02-02
Vue如何實現(xiàn)組件間通信
組件間通信簡單來說就是組件間進行數(shù)據(jù)傳遞。就像我們?nèi)粘５拇螂娫?，就是通訊的一種方式，你把話說給我聽，我把話說給你聽，說的話就是數(shù)據(jù)。電話就是通訊方式的一種。無論是 Vue 還是 React ，都得進行組件間通信。
2021-05-05
vue下拉刷新組件的開發(fā)及slot的使用詳解
這篇文章主要介紹了vue下拉刷新組件的開發(fā)及slot的使用詳解,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-12-12
前端vue數(shù)組去重的三種方法代碼實例
數(shù)組去重是我面試時候經(jīng)常會問到應(yīng)聘者的一個問題,所以下面這篇文章主要給大家介紹了關(guān)于前端vue數(shù)組去重的三種方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-06-06
Vue-cli3項目配置Vue.config.js實戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于Vue-cli3項目配置Vue.config.js的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-07-07
vue3動態(tài)組件使用詳解
這篇文章主要介紹了vue3動態(tài)組件使用詳解的相關(guān)資料,需要的朋友可以參考下
2023-02-02
詳解VueRouter進階之導(dǎo)航鉤子和路由元信息
本篇文章主要介紹了詳解VueRouter進階之導(dǎo)航鉤子和路由元信息，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-09-09
Vue使用vue-pdf實現(xiàn)PDF文件預(yù)覽
這篇文章主要為大家詳細介紹了Vue如何使用vue-pdf實現(xiàn)PDF文件預(yù)覽的功能，文中的示例代碼講解詳細，具有一定的參考價值，感興趣的可以了解一下
2023-03-03