前端小laji 2023-07-06 15:38 采纳率: 50%
浏览 15
已结题

动态修改 html-webpack-plugin 动态修改页面的title

用vue2+vant2写的H5项目
现在新增了一个入口地址
要动态修改 html-webpack-plugin 动态修改页面的title

 <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
    <meta
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"
      name="viewport"
    />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>

例如：
从a入口进去时title里的内容是：我想下班
从b入口进入时title里的内容是：我还是想下班

img

  • 写回答

2条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-07-08 19:11
    关注
    不知道你这个问题是否已经解决, 如果还没有解决的话:
    • 这篇博客: Vue学习之前端工程化与webpack中的 安装html-webpack-plugin 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

      在这里插入图片描述
      这个插件的作用就是让我们上面的http服务器一打开就是我们的首页面，如果不装这个插件的话则这个服务器进去显示的会是我们当前工程的文件目录，我们要进入页面就还得再进一层src才行，所以这个插件就是帮助我们能把index页面放在当前工程的根目录下然后能够让我们直接访问localhost:8080/就能看到实时更新的页面的插件，如果不装则我们要访问localhost:8080/src才能看到页面文件。
      在这里插入图片描述

      这个了解了解就行了，后面正式学习Vue时，用脚手架vue-cli都会帮我们集成在里面的，但是webpack了解之后会让我们对脚手架创建的项目有更深的认识。

    • 以下回答来自chatgpt:

      首先，根据参考资料中的段落0，我们需要安装html-webpack-plugin插件。可以使用以下命令进行安装：

      npm install html-webpack-plugin -D

      然后，在webpack配置文件中引入html-webpack-plugin，并配置插件。可以按照如下代码进行配置：

      const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  // 其他配置项...
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'public/index.html'),
      filename: 'index.html',
      chunks: ['app']
    })
  ]
}

      其中，template参数指定了HTML模板文件的路径，filename参数指定生成的HTML文件的文件名，chunks参数指定需要加载的chunk。

      然后，我们可以在HTML模板文件中使用<title>标签来设置页面的动态标题。例如：

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

      注意，我们在<title>标签内使用了变量htmlWebpackPlugin.options.title。这个变量会被html-webpack-plugin自动填充为我们在webpack配置中设置的title属性。

      接下来，我们需要根据不同的入口地址动态设置页面的标题。在项目的入口文件中，我们可以获取当前的URL地址，然后根据地址设置对应的标题。以下是一个示例代码：

      // 在入口文件中引入Vue和其他必要的模块
import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 在Vue实例创建之前，根据URL地址设置页面的标题
let title = '';
if (window.location.pathname === '/a') {
  title = '我想下班';
} else if (window.location.pathname === '/b') {
  title = '我还是想下班';
}
document.title = title;

// 创建Vue实例
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

      在上面的代码中，我们通过判断window.location.pathname的值来确定当前的URL地址，然后根据地址设置对应的标题。

      最后，我们可以运行npm run dev来启动开发服务器，并查看效果。


    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 7月26日
  • 已采纳回答 7月18日
  • 创建了问题 7月6日

悬赏问题

  • ¥100 网页游戏在本地页面修改游戏结果
  • ¥30 comfyui openpose报错
  • ¥20 Wpf Datarid单元格闪烁效果的实现
  • ¥15 图像分割、图像边缘提取
  • ¥15 sqlserver执行存储过程报错
  • ¥100 nuxt、uniapp、ruoyi-vue 相关发布问题
  • ¥15 浮窗和全屏应用同时存在，全屏应用输入法无法弹出
  • ¥100 matlab2009 32位一直初始化
  • ¥15 Expected type 'str | PathLike[str]…… bytes' instead
  • ¥15 三极管电路求解，已知电阻电压和三级关放大倍数