Home > Web Front-end > JS Tutorial > body text

What should I do if the vue small icon favicon does not display?

小云云
Release: 2018-02-08 13:33:53
Original
2413 people have browsed it

Although vue scaffolding is easy to use, file configuration issues have always been a headache. This article mainly introduces to you the solution to the problem that the Vue small icon favicon does not display. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Using the vue framework to make native code, various problems occurred. Problems also occurred when setting small icons before. I summarized the online solutions and wrote down my personal experiments and The solution that worked:

I dropped favico.ico directly into the root directory (which is the directory at the same level as src), and then configured it in the build/webpack.dev.conf.js file

1. Add this code to the plugins in the webpack.dev.conf.js file


new HtmlWebpackPlugin({
   filename: 'index.html',
   template: 'index.html',
   inject: true,
   favicon: './favicon.ico' 
  })
Copy after login

After adding the code, it looks like this:

2. Introduce the code into index.html:


<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" rel="external nofollow" />
Copy after login

3. After modifying the configuration file, remember to npm run dev again. It works

About Google Chrome not displaying small icons: It’s a cache problem, try to force refresh manually (ctrl+F5)
Note: (I also put the favicon in the static folder, because I It didn’t work, so I used this method. If I put static, I just need to change the path of the favicon. )

Related recommendations:

Two JS implementations of Input. How to add small icons in

Sharing of tips on front-end processing of small icons

##Detailed explanation of iconfont font icons and various css small icons

The above is the detailed content of What should I do if the vue small icon favicon does not display?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!