带有 webpack 和 vue-cli 的网站图标
[英]Favicon with webpack and vue-cli
问题描述
Hey everyone so I have a predicament.
大家好，所以我有一个困境。 index.html is created by webpack for my vue project. index.html 是由 webpack 为我的 vue 项目创建的。 It's currently looking for favicons inside the the dist folder as shown below.它目前正在 dist 文件夹中寻找网站图标，如下所示。 However the icons folder does not even exist inside of the dist/img folder.但是，图标文件夹甚至不存在于 dist/img 文件夹中。 I didn't configure webpack I am just managing the site and honestly don't know that much about it.我没有配置 webpack 我只是在管理站点，老实说对它了解不多。 I don't know how I would put those files in the dist folder and have it stick as it is in the.gitignore file and I am pretty sure they don't want me messing with that.我不知道如何将这些文件放在 dist 文件夹中并将其保留在 .gitignore 文件中，我很确定他们不希望我弄乱它。 How can I get those files in a place they will be picked up by webpack or edit webpack to look for the files in a different location?如何将这些文件放在 webpack 或编辑 webpack 以在不同位置查找文件的位置？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Vue App</title>
<link href="/bundle.js" rel="preload" as="script" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,user-scalable=no"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/img/icons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/img/icons/favicon-16x16.png"
/>
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#4DBA87" />
<meta name="apple-mobile-web-app-capable" content="no" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="creative-engine-spa" />
<link
rel="apple-touch-icon"
href="/img/icons/apple-touch-icon-152x152.png"
/>
<link
rel="mask-icon"
href="/img/icons/safari-pinned-tab.svg"
color="#4DBA87"
/>
<meta
name="msapplication-TileImage"
content="/img/icons/msapplication-icon-144x144.png"
/>
<meta name="msapplication-TileColor" content="#000000" />
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/bundle.js"></script>
</body>
</html>
I don't know if this would help ya'all with my question but I also have this code in my vue.config.js file我不知道这是否能帮助你们解决我的问题，但我的 vue.config.js 文件中也有这段代码
const path = require("path");
module.exports = {
chainWebpack: config => {
config;
config.plugin("html").tap(args => {
args[0].meta = {
viewport: "width=device-width,initial-scale=1,user-scalable=no"
};
return args;
});
},
configureWebpack: {
devtool: "cheap-source-map",
output: {
filename: "bundle.js"
}
}
};
2 个解决方案
解决方案1
2 2019-10-02 20:19:56
you can define the path of the favicon in vue.config.js file您可以在 vue.config.js 文件中定义 favicon 的路径
Read for more info here 在这里阅读更多信息
const path = require("path");
module.exports = {
chainWebpack: config => {
config;
config.plugin("html").tap(args => {
args[0].meta = {
viewport: "width=device-width,initial-scale=1,user-scalable=no"
};
args[0].inject = true;
args[0].filename = "index.html";
args[0].favicon = "./public/favicon.ico"; // path to favicon
return args;
});
},
configureWebpack: {
devtool: "cheap-source-map",
output: {
filename: "bundle.js"
}
}
};
解决方案2
1 已采纳 2019-10-08 20:41:46
I had to find my static folder.我必须找到我的 static 文件夹。 In my case it was the public folder and drop the files in there.在我的情况下，它是公用文件夹并将文件放在那里。 In the folder structure I wanted to grab them in. Apparently your static folder gets built every time.在文件夹结构中，我想将它们放入其中。显然，您的 static 文件夹每次都会构建。 In my case my folder structure looked like so public/img/favicon-32x32.png就我而言，我的文件夹结构看起来像这样public/img/favicon-32x32.png
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.