vue怎么改logo_vue项目添加网页logo

网上关于为vue项目添加网页logo的文章很多，步骤很简单，但是博主还是踩了坑，特此记录一下[○･｀Д´･ ○]

先上效果：

1.首先，要为网页添加logo我们需要一张ico格式的图标。

可以用网上的在线转换工具，将“jpg/png”格式的图片转为“ico”，格式，这里我用的是“比特虫”,

最好选16*16格式的，比较兼容

生成后的文件记得重命名为“favicon.ico”(这里就是博主踩的第一个大坑，我自己去了个名字“logo.icon”，结果怎么试都不成功！)

注意一下使用说明：

最后使用方形的图片来制作，否则转换成的图标会“缺胳膊少腿”(第二个坑)

2.有了ico图标后，把它放在项目文件夹下，这里我直接放在根路径

然后修改build下面的文件夹：

找到这一段：

加入标红的文字，如果是多入口的项目，则根据需求为每个页面添加图标即可

dev和pro文件都需要修改，因为dev对应的是我们本地运行环境，pro对应的是实际生产环境，若是只修改一个的话，则会导致本地或者服务器上添加logo失败！

new HtmlWebpackPlugin({

filename: config.build.login,

template: 'login.html',

inject: true,

favicon:'favicon.ico',

minify: {

removeComments: true,

collapseWhitespace: true,

removeAttributeQuotes: true

// more options:

// https://github.com/kangax/html-minifier#options-quick-reference

// necessary to consistently work with multiple chunks via CommonsChunkPlugin

chunksSortMode: 'dependency',

chunks: ['manifest', 'vendor', 'login']

})

vue怎么改logo_vue项目添加网页logo相关推荐

vue怎么改logo_vue全家桶项目构建教程
前言 vue是现阶段很流行的前端框架,很多人通过vue官方文档的学习,对vue的使用都有了一定的了解,但再在项目工程化处理的时候,却发现不知道改怎么更好的管理自己的项目,如何去引入一些框架以及vue全 ...
【无标题】Vue项目添加网页背景图片
<template> <div id="picture"></div> </template> <style> #pic ...
springboot基础(10):给springboot项目添加网页
文章目录前言一.index.html 作为首页面 1. 静态首页 2. 动态首页二.使用xxx.html 的文件作为首页面方法一: Controller 控制首页方法二:重写WebMvcCo ...
在vue项目或网页上实现文字转换成语音
** 在vue项目或网页上简单实现文字转换成语音播放 ** 一.在网页上实现文字转换成语音方式一: 摘要:语音合成:也被称为文本转换技术(TTS),它是将计算机自己产生的.或外部输入的文字信息转变为 ...
html 语音转换成文本,vue项目或网页上实现文字转换成语音播放功能
一.在网页上实现文字转换成语音方式一: 摘要:语音合成:也被称为文本转换技术(TTS),它是将计算机自己产生的.或外部输入的文字信息转变为可以听得懂的.流利的口语输出的技术. 1. 使用百度的接口: ...
为 VUE 项目添加 PWA 解决发布后刷新报错问题
为 VUE 项目添加 PWA 解决发布后刷新报错问题参考文章: (1)为 VUE 项目添加 PWA 解决发布后刷新报错问题 (2)https://www.cnblogs.com/morang/p/9 ...
Vue.js-localhost:8080-无法显示此网页-【已经初始化的项目，如何再次在服务器上运行?】
Vue.js---初始化项目: Vue.js-Day03-AM[超级详细:Node.js环境安装.安装淘宝镜像(Win.Mac).安装Vue脚手架.初始化Vue项目-命令解释(Vscode.命令行窗口 ...
超详细！！vue、vue-cli脚手架项目使用prerender-spa-plugin，解决SEO并为其添加title，keyWords，descript
vue.vue-cli脚手架项目使用prerender-spa-plugin,解决SEO并为其添加title,keyWords,descript 注意注意注意:本文章所有例举内容,页面均为纯静态页 ...
Vue给项目添加进度条
前言在PC端项目的开发过程中,有时我们需要给项目添加一个进度条来展示界面是否已经完成加载的情况.那么如何才能成功添加进度条呢? 添加方式用法1: 在拦截器中使用 1.引入插件Nprogress n ...
Vue 电商实践项目
今日目标 1.能够说出什么是路由 2.能够说出前端路由的实现原理 3.能够使用Vue-Router实现前端路由 4.能够实现嵌套路由,动态路由 5.能够实现命名路由以及编程式导航 6.理解并实现后台管 ...

vue怎么改logo_vue项目添加网页logo

vue怎么改logo_vue项目添加网页logo相关推荐

最新文章

热门文章