若依框架更改浏览器的title和图标

已于 2022-04-14 14:05:39 修改
阅读量1.3w 收藏 33
点赞数 12
分类专栏： vue js 若依框架 文章标签： javascript webpack vue.js
于 2022-04-14 10:48:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45030898/article/details/124166180
版权
js 同时被 3 个专栏收录
74 篇文章 0 订阅
订阅专栏
vue
58 篇文章 0 订阅
订阅专栏
若依框架
2 篇文章 0 订阅
订阅专栏

若依框架更改浏览器的title和图标

1.实现效果

在这里插入图片描述
可以看到title是改变了的，图标偷懒就没有换

2.实现过程

2.1改变图标

在这里插入图片描述
打开index.html文件，
在这里插入图片描述
第一个就是自己换一下图标就可以了的

2.2改变title

还是在上面的index.html中，但是这里改变title标签里面的<%= webpackConfig.name %>是没有效果的。我们需要在其他地方改，
如果你是在dev环境，就在.env.development文件下改，不然就在.env.production里面改，打开文件
在这里插入图片描述
把页面标题改成自己想要的标题就可以了的。其实到这里应该就是成功了的，但是以防万一，在vue.config.js中也要改一下

在这里插入图片描述
把标记的地方改一下就完美

ฅQSω[*邱╭
关注
  • 12
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 17
    评论
专栏目录
小白也懂的若依中修改浏览器网页与左侧菜单栏标题与图标
weixin_52890053的博客
12-20 2399
小白也懂的若依中修改浏览器网页与左侧菜单栏标题与图标，面向0基础的若依初学者！
若依---修改系统标题
chunchun的博客
12-13 641
这个组件的主要作用是作为根组件，承载整个应用的结构，并使用 Vue Router 来渲染不同路由对应的组件。同时，它利用 vue-meta 插件来动态管理页面的元信息。: 这是一个使用了 vue-meta 插件提供的功能，用于动态设置页面的元信息（例如标题）。这段代码是一个 Vue.js 组件，是应用的根组件。保存修改后的代码前端重新运行之后就可以看到修改之后的标题。: 导出默认的对象，通常是 Vue.js 组件对象。上面这个地方的标题修改则是找到logo.vue文件。: 组件的名称，命名为 “App”。
若依修改浏览器标题logo
最新发布
m0_61265297的博客
06-14 212
在线生成透明ICO图标——ICO图标制作https://www.ico51.cn/
若依框架（路由跳转，如何动态修改tabs页的title ）
u014722196的博客
08-17 2555
代码】若依框架（路由跳转，如何动态修改tabs页的title ）
Vue项目实践（1）
立于浮华之世，奏响天籁之音
07-21 2487
项目配置策略 基础配置：指定应用上下文、端口号，vue.config.js 修改后需要重启 const port = 7070; module.exports = { publicPath: '/practice', // 部署应⽤包时的基本 URL devServer: { port, } } 配置webpack：configureWebpack 我们在项目过程中主要也是与wepack打交道，所配置的选项都会与原有的进行合并 webpack-merge 合并出终选项 对象形式配置：不是特
webpack的配置
m0_73738273的博客
12-19 525
webpack配置简单易懂
Webpack配置详解（package.json/webpack.config.js详细配置 ）
时清云的博客
12-17 9487
Webpack配置详解（package.json/webpack.config.js详细配置 ） webpack安装 package.json配置以及模块安装 webpack.config.js配置 开启webpack-dev-server服务 热替换插件的安装以及配置 开启自动打开浏览器插件的安装以及配置 加载器的安装以及配置 完整package.json/webpack.config.js文件...
黑马webpack总结
qq_44287165的博客
09-13 453
webpack的基本使用 1，什么是webpack？ 概念：webpack 是前端项目工程化的具体解决方案。 主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。 好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。 注意：目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的 2，在项目中安装webpack 在终端运行如下的命令，安装 webpack 相
【Webpack】基础知识点
Primary_Insist的博客
03-06 1319
目录 一、相关概念 二、相关操作 Ⅰ.两个js文件打包成1个js文件 Ⅱ.自动生成html文件 Ⅲ.打包css文件 Ⅳ.打包less文件 Ⅴ.打包图片文件 Ⅵ.处理字体图标 Ⅶ.降级js语法 三、开发服务器 一、相关概念 本质：一个第三方模块包，用于分析，并打包代码 支持所有类型的文件的打包 支持less/sass=>css 支持ES5/7/8=>ES5 webpack打包流程： 初始化包...
python中的selenium安装的步骤（浏览器自动化测试框架）
09-17
在Python编程语言中，Selenium是一个强大的自动化测试框架，它允许开发者模拟用户行为，进行网页应用的自动化测试。本文将详细介绍在Python环境下安装Selenium的步骤，特别关注如何处理浏览器驱动的下载和配置。 ...
jQuery插件ThickBox打开框架页
01-28
在描述中提到的修改可能是指将原本的文字“关闭”替换为一个图片图标，这种改变可以增加视觉效果，使关闭按钮更加明显，更符合现代网页设计的趋势。 ### 3. 点击父页面关闭修正 ThickBox弹出框通常是独立于主页面...
title-Academy
04-28
结合描述中的 "应用程序"，我们可以推断这可能是一个Web应用，或者是支持用户通过浏览器进行学习和实践的平台。 【描述】"titleAcademy 应用程序" 提示我们这个项目可能是为了帮助用户掌握编程技能，特别是针对初学...
extjs 图标文件
08-27
通过调整主题CSS，可以更改所有组件的图标颜色、大小和样式。 6. **图标精灵** 为了提高性能，ExtJS使用图标精灵技术，将多个图标合并到一个大的图像文件中。这样，浏览器只需要加载一个文件，然后通过CSS定位到...
Yii2框架的SweetAlert小部件_PHP_下载.zip
04-05
SweetAlert是一个流行的JavaScript库，它提供了美观的提示对话框，用于替代浏览器默认的警告、确认和错误消息。在Yii2框架中集成SweetAlert可以为你的应用增添一些视觉吸引力和更好的用户体验。 在这个“Yii2框架的...
史上最全若依管理系统修改页面标题和logo
热门推荐
一个会搜索的程序员
03-08 2万+
进入ruoyi-ui --> src --> layout --> components --> Sidebar --> Logo.vue，进入ruoyi-ui --> src --> assets --> logo --> logo.png，把这个图片换成你自己的logo。进入ruoyi-ui --> public --> favicon.ico，把这个图片换成你自己的logo。将ruoyi-ui --> src -->views 下的login.vue文件中的。title: '若依管理系统'
Webpack打包的通用优化细节
weixin_55690518的博客
09-01 510
Webpack打包优化的目的: 在保证功能可用的前提下，让我们的文件尽可能小 在保证功能可用的前提下，让我们的页面显示出来的速度更快一些 打包之后，会得到dist目录，如果希望可以双击打开index.html，则需要提前在vue.config.js中配置：vue.config.js中 { publicPath: './' } 1、打包优化-路由懒加载 什么是路由懒加载：懒加载的意思是：只有在路由进入这个页面时，才去加载这个组件对应的资源，一个路由对一个组件，表示一个..
若依前后端分离如何修改title标题呢？
猿小白的博客
03-25 3752
目录 1、如何修改title标题 ​2、如何修改左侧栏标题 ​3、修改其它配置参数 1、如何修改title标题 修改文件：.env.development（修改完配置文件，记得重启一下前端服务） 2、如何修改左侧栏标题 修改文件：src\layout\components\Sidebar\Logo.vue 3、修改其它配置参数 修改文件：src\settings.js ...
若依框架怎么修改接口
08-29
要修改若依框架中的接口，可以按照以下步骤进行操作： 1. 找到需要修改的接口所在的文件或模块。根据引用和引用，我们可以看到两个需要修改的接口，一个是添加配置（addConfig），另一个是修改角色状态（dataScope）。 2. 打开对应的文件或模块，查找接口的定义和实现代码。根据引用和引用提供的信息，我们可以找到这两个接口的请求方式、请求URL和传参。 3. 根据需要修改接口的功能和逻辑。根据具体需求，可以修改接口的请求方式、请求URL或传参内容。例如，对于修改角色状态接口，可以修改传参中的角色状态值。 4. 保存修改并重新构建项目。在修改完接口后，保存文件并重新构建若依框架项目，确保修改生效。 请注意，具体的修改操作可能因为框架版本、项目结构等因素而有所差异。在进行修改之前，建议先熟悉若依框架的文档和相关代码结构，并备份项目以防万一。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [进行二次封装的若依框架](https://download.csdn.net/download/cqqorcq/15559145)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [若依框架_05：接口汇总](https://blog.csdn.net/Share_Li_98/article/details/126527874)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值