我已经使用vue-cli创建了一个vue webpack项目.

vue init webpack myproject

然后在dev模式下运行项目:

npm run dev

我收到这个错误:

加载资源失败:服务器响应状态为404(未找到)http://localhost:8080/favicon.ico

那么在webpack内部,如何正确导入一百呢?

推荐答案

查看网页包模板的项目结构:https://vuejs-templates.github.io/webpack/structure.html

请注意,这里有一个静电文件夹,还有node_modulessrc等.

如果您将一些图像放入static文件夹,如favicon.png,它将在http://localhost:8080/static/favicon.png可用

以下是静态assets资源 的文档:https://vuejs-templates.github.io/webpack/static.html

对于您的Collection 夹图标问题,您可以将favicon.icofavicon.png放入static文件夹,然后在index.html的<head>中引用,如下所示:

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
    <title>My Vue.js app</title>
    ...
</head>

如果您在index.html中没有定义favicon.ico,则浏览器将从网站根目录请求一个Collection 夹图标(默认行为).如果您指定如上所述的Collection 图标,您将不会再看到该404.Collection 夹图标也将开始显示在您的浏览器选项卡中.

作为旁注,以下是我喜欢PNG而不是ICO文件的原因:

favicon.png vs favicon.ico - why should I use PNG instead of ICO?

Html相关问答推荐

FlexBox 将元素挤压在一起

左右引号在 Safari 中呈现为意外字符

如何使省略号在 HTML 表格中工作?

一个 SVG 的多个路径的多个复选框

如何在 flex 容器中左对齐图像?

如何为表情符号使用不同的样式?

在 Bootstrap 5 中垂直居中 div

CSS网格样式

在CSS中屏蔽环绕另一个图像的圆形图像

我们如何使用 css 水平对齐文本?

abel(input type="radio") 不在中心

悬停状态之间的元素高度转换

从传单 map 导入数据作为 R 中的 sf 对象

如何使用 CSS 制作这种照明效果

如何从对象 URL 获取文件或 blob?

与 target="_blank" 和 rel="noopener noreferrer" 的链接仍然容易受到攻击?

用什么代替 ::ng-deep

强制弹性项目跨越整个行宽

Swift:在标签或文本视图中显示 HTML 数据

在 Bootstrap 轮播中更改箭头 colored颜色