vue 怎么设置 项目ico,如何在vue.js webpack项目中正确设置favicon.ico？

I have created a vue webpack project using vue-cli.

vue init webpack myproject

And then ran the project under dev mode:

npm run dev

I got this error:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/favicon.ico

So inside webpack, how to import the favicon.ico correctly?

解决方案

Note that there is a static folder, along with node_modules, src, etc.

If you put some image into the static folder, like favicon.png, it will be made available at http://localhost:8080/static/favicon.png

For your favicon issue, you can put a favicon.ico or favicon.png into the static folder and refer in the

of your index.html as follows:My Vue.js app

...

If you do not define a favicon.ico in your index.html, then the browser will request for a favicon from the website root (default behaviour). If you specify a favicon as above, you will not see that 404 anymore. The favicon will also start showing up in your browser tabs.

As a side note, here is the reason why I prefer PNG instead of ICO file: