vue+webpack设置浏览器图标

最新推荐文章于 2023-12-20 11:14:06 发布
最新推荐文章于 2023-12-20 11:14:06 发布
阅读量490 收藏 1
点赞数
分类专栏： 前端 文章标签： webpack vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjl13598765406/article/details/127994336
版权

1. index.html 文件引入（图片要放在static静态资源文件夹内，防止打包之后文件图片找不到）

在这里插入图片描述

<link rel ="shortcut icon" type="image/x-icon" href="assets/favicon.ico">

2. 在build/webpack.dev.conf.js中设置（文件内搜索 HtmlWebpackPlugin ，加入favicon属性）

在这里插入图片描述

 favicon: path.resolve('./src/assets/favicon.ico')

3.在build/webpack.prod.conf.js中设置设置（文件内搜索 HtmlWebpackPlugin ，加入favicon属性）

在这里插入图片描述

 favicon: path.resolve('./src/assets/favicon.ico')
代码改变生活-120
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-project:Webpack5 +微服务
03-22
Vue.js项目结合Webpack5与微服务的实践是一个现代前端开发的重要话题。在这个项目中，我们将深入探讨如何构建一个基于Vue.js的应用程序，并利用Webpack5的强大功能优化构建过程，同时引入微服务的概念来提升项目的可...
基于vuevueclivuerouteraxioswebpack开发的vue社区webapp
08-12
2. 配置Vue Router：安装并设置路由规则，实现页面间的导航。 3. 编写组件：根据需求创建Vue组件，实现UI和业务逻辑。 4. 引入Axios：安装并配置Axios，用于处理HTTP请求。 5. 使用Webpack：Webpack自动处理模块依赖...
浏览器图标引入vue项目中
wzp20092009的博客
11-27 395
浏览器的tab中有个icon的图标需要显示 主要有两种方法 一、在webpack中配置 打开build/webpack.dev.conf.js文件进行配置 找到plugins这个属性，在里面添加属性favicon，值为icon的地址 有些文章说这里还需要在index.html中添加link，地址为favicon的地址，测过之后发现不需要 修改完配置文件之后一定要npm run dev才能生效，如...
vue项目设置浏览器标题图标
程序员一枚，仅记录工作中的难点
03-31 579
【代码】vue项目设置浏览器标题图标。
Webpack 配置: 自定义网站图标 favicon
超悠閒的博客
03-04 1991
Webpack 配置: 自定义网站图标 favicon 文章目录Webpack 配置: 自定义网站图标 favicon实现核心技术: html-webpack-plugin 插件完整代码示例参考连接 实现核心技术: html-webpack-plugin 插件 我们可以透过 html-webpack-plugin 来实现自定义 favicon 的配置 从原生的角度来说，我们要自定义 favicon 需要在 html 文件的 <head> 标签内加上这句话 <link rel="shortc
VUE2X-Webpack版本配置浏览器标题和ico图标
weixin_53003063的博客
05-11 341
main.js //配置浏览器标题 Vue.directive('title', { inserted: function (el, binding) { document.title = el.dataset.title } }) app.vue <template> <div id="app" v-title data-title="穗岁の"> <router-view/> </div> </template.
vue cli怎么添加浏览器标签页图标
晓风揽月
06-06 423
在build文件夹 1. 找到webpack.dev.conf.js，再找到HtmlWebpackPlugin，添加favicon:‘favicon.ico路径’ new HtmlWebpackPlugin({ 　　filename: 'index.html', 　　template: 'index.html', 　　favicon:'./nationalEmblem.png', //这里设置图标路径 　　inject: true }) 2. 然后找到webpack.prod.conf.js
基于vue+webpack的天气预报网页源码.zip
10-28
Webpack 是一个模块打包工具，它能够处理JavaScript、CSS、图片等资源，将它们打包成一个或多个优化过的静态文件，以供浏览器加载。在"基于vue+webpack的天气预报网页源码"中，这两个技术结合，构建了一个动态展示...
毕设-空间管理系统-前端前台Vue2+webpack+MintUI.zip
10-20
在实际的开发过程中，开发者会先定义好各种Vue组件，如用于展示空间信息的卡片、预订表单等，然后利用Webpack的配置文件（通常为`webpack.config.js`）进行编译设置，比如设置入口文件、输出路径、加载器规则等。...
基于vue+javascript实现的RPG游戏
04-20
- 使用`Webpack`或`Vite`进行模块打包，将源代码编译成浏览器可执行的格式。 - 可能有`Git`版本控制，用于团队协作和代码版本管理。 - 开发过程中可能借助`VSCode`等IDE，配合Vue插件提高开发效率。 6. **测试与...
【webpack5配置favicon.ico】
Min_Fox的博客
06-21 948
一个简单的html页面，配置了webpack5去进行打包，没有用任何框架。纯html+ts+lessGET http://localhost:8080/src/favicon.ico 404 (Not Found) 运行起来回报这个错误，在入口文件index.html页面添加下面代码，不行 还是会报错，找不到图片，但是换成网页链接就可以 这个是可以的（网页链接，没有直接从本地引入）： 原因分析： 可能是webpack5的原因，图片地址的引入会受影响，不能直接这么引入吧。也有可能是我猜错了，反正我也不知道为
Vue工程的浏览器小图标（缩略的网站标志）无法解析或修改的问题
m0_52116878的博客
11-30 742
vue工程的浏览器小图标（缩略的网站标志）无法解析或修改的问题
vue设置浏览器ico图标
最新发布
fakuangjingling的博客
12-20 1937
【代码】vue设置浏览器icon图标。
html修改插件图标,webpack配置中常用的html-webpack-plugin插件认识
weixin_39915078的博客
06-09 173
运行webpack命令，会在dist目录下生成一个js文件，这时候新建一个index.html文件并引入这个js：tu1这中间的87097d就是上一次运行webpack命令时生成的hash值，如果每次对js改动，然后运行webpack命令，都会引起hash值的变化，也就是说每次都得在index.html中改变引入js名称，这样显然不合理，这时候可以引入html-webpack-plugin插件进行...
webpack4配置favicon网页图标方法
6块腹肌的博客
07-19 2992
step1： 安装html-webpack-plugin 模块 cnpm install html-webpack-plugin --save step2: 在config/webpack.dev.js中引入： const HtmlWebpackPlugin = require('html-webpack-plugin'); step3： 在插件中配置好ico的路径 plu...
webpack 处理网页小图标favicon
a8725585的博客
09-05 5383
问题现象： vue脚手架使用了HtmlWebpackPlugin插件打包index中的依赖，因此设置小图标的时候按原来的方法会出现问题 在页面源文件index.html的标签之间插入 &lt;link rel="shortcut icon" href=" /favicon.ico" /&gt; 仍然无法加载小图标 解决方法： HtmlWebpackPlugin插件中加入小图标 ...
vue-cli3 vue项目 动态修改favicon.ico(浏览器顶部小图标)
wocwin的博客
08-17 4944
vue-cli3 vue项目 动态修改favicon.ico(浏览器顶部小图标)
Vue：利用Vue生成的网页，在浏览器中的标签页中的图标与标题怎么修改为自己的？
XRT_knives的博客
12-04 422
Vue：利用Vue生成的网页，在浏览器中的标签页中的图标与标题怎么修改为自己的？ 在解决这个问题的时候，在网上搜到了许多答案，可以说是众说纷纭，作者结合了多个答案，最后解决了这个问题，下面把用到的资源分享出来。 资源 Vue 动态修改网页标题和图标 VUE3 项目自定义修改网页标题和图标 VUE设置浏览器标题及图标 在线png转ico的网站 ...
vue项目中浏览器图标的设置
热门推荐
若晨工作室
09-26 2万+
在vue项目中，我们怎样设置浏览器图标？ 我们来看vue项目的目录结构，根目录下有一个index.html，这个就相当于我们普通项目中的各个html页面文件，所以设置方法就是在index.html的head标签中添加link标签。 在这里要注意的是图标文件的位置，不能放到src里，这样的路径会让浏览器找不到。网页把根域名作为相对路径的根目录了，然而我们文件的路径是相对于项目文件的根目录的，
vue + webpack 多页/单页 脚手架
09-30
Vue + Webpack多页/单页脚手架是一种用于构建Vue.js项目的工具。Vue.js是一个用于构建用户界面的JavaScript框架，而Webpack是一个模块打包工具。 多页/单页脚手架可以根据项目的需求选择构建方式。多页应用指的是每...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值