Vue.js - Vue 2.0 项目 favicon.ico 不显示解决方案

简介: Vue.js - Vue 2.0 项目 favicon.ico 不显示解决方案

1、最好把 favicon.ico 放到 index.html 放到同一目录

2、在 webpack 配置文件里面配置

// 在 webpack.dev.conf.js 里面的 plugins 配置newHtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon: './favicon.ico'// 增加这条}),
// 和在 webpack.prod.conf.js 里面 plugins 配置,不然 build 的时候也找不到 favicon.iconewHtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
favicon: './favicon.ico', // 增加这条minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true  },
chunksSortMode: 'dependency'})


3、在 index.html 中引入代码

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


4、修改完配置文件最好 npm run dev 一下

如果这样小图标还是没有显示,最好 清空一些缓存~

目录
相关文章
|
1天前
|
缓存 JavaScript 前端开发
vue-day02计算属性,v-bind,v-if,v-for
文章介绍了Vue.js中的计算属性、class与style的绑定、条件渲染和列表渲染的使用。通过示例代码展示了如何使用计算属性简化模板逻辑、如何通过v-bind动态绑定class和style、如何使用v-if进行条件渲染以及如何使用v-for进行列表渲染。这些特性使得Vue.js在构建动态用户界面时更加灵活和强大。
vue-day02计算属性,v-bind,v-if,v-for
|
1天前
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。
vue项目中使用vue-router进行路由配置及嵌套多级路由
|
2天前
|
JavaScript
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
本文讨论了在使用Vue和Element UI实现树形数据和懒加载时遇到的“Maximum call stack size exceeded”错误,指出问题的原因通常是因为数据中的唯一标识符`id`不唯一,导致递归渲染造成调用栈溢出。
11 1
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
|
1天前
|
JavaScript
vue项目中引入阿里图标iconfont
该文章指导如何在Vue项目中引入并使用阿里图标库Iconfont,包括图标的选取、下载配置文件及在项目中引入和使用图标的具体步骤。
|
1天前
|
JavaScript 网络架构
|
1天前
|
JavaScript 前端开发 Java
vue-day03 组件基础
文章介绍了Vue.js中组件的基础概念、注册格式、命名方式、全局与局部注册的区别、prop属性的详细使用以及通过prop向子组件传递数据的方法,并提供了计数器和博文小组件的实例。
|
1天前
|
人工智能 JavaScript 索引
Duplicate keys detected: This may cause an update error.【Vue遍历渲染报错的解决】
这篇文章讨论了在Vue中进行列表渲染时遇到的“Duplicate keys detected”错误。这个错误通常发生在使用 `v-for` 指令渲染列表时,如果没有为每个循环项指定一个唯一的 `key` 属性,或者指定的 `key` 属性值重复了。文章提供了导致错误的原始代码示例,并给出了修正后的代码,通过在 `key` 绑定中加入索引确保 `key` 的唯一性。此外,文章还解释了为什么需要唯一 `key` 以及如何解决这个问题。
Duplicate keys detected: This may cause an update error.【Vue遍历渲染报错的解决】
|
1天前
vue2的响应式原理学“废”了吗?继续观摩vue3响应式原理Proxy
该文章对比了Vue2与Vue3在响应式原理上的不同,重点介绍了Vue3如何利用Proxy替代Object.defineProperty来实现更高效的数据响应机制,并探讨了这种方式带来的优势与挑战。
vue2的响应式原理学“废”了吗?继续观摩vue3响应式原理Proxy
|
1天前
|
缓存 移动开发 JavaScript
查漏补缺方为上策!!两万六字总结vue的基本使用和高级特性,周边插件vuex和vue-router任你挑选
该文章全面总结了Vue.js的基本使用方法与高级特性,并介绍了Vue周边的重要插件Vuex和Vue-Router的使用技巧。
查漏补缺方为上策!!两万六字总结vue的基本使用和高级特性,周边插件vuex和vue-router任你挑选
|
1天前
|
JavaScript
Vue Cli 脚手架安装
本文介绍了如何使用npm和cnpm淘宝镜像加速来安装Vue CLI脚手架工具,并验证安装成功。接着,通过Vue CLI创建新项目,并启动项目服务。
Vue Cli 脚手架安装