使用 webpack 和 vue-cli 的网站图标

Question

大家好，我有一个困境。 index.html 是由 webpack 为我的 vue 项目创建的。它目前正在 dist 文件夹中寻找图标，如下所示。然而，图标文件夹甚至不存在于 dist/img 文件夹中。我没有配置 webpack，我只是在管理站点，老实说，我对此了解不多。我不知道如何将这些文件放在 dist 文件夹中，并让它保持在 .gitignore 文件中，我很确定他们不希望我弄乱它。我怎样才能将这些文件放在 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>

我不知道这是否能帮助大家解决我的问题，但我的 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"
    }
  }
};

Answer 1

您可以在 vue.config.js 文件中定义图标的路径

阅读更多信息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"
    }
  }
};

Answer 2

我必须找到我的静态文件夹。在我的例子中，它是 public 文件夹并将文件放到那里。在文件夹结构中，我想抓住它们。显然你的静态文件夹每次都会构建。在我的例子中，我的文件夹结构看起来像这样 public/img/favicon-32x32.png

使用 webpack 和 vue-cli 的网站图标

Favicon with webpack and vue-cli

node.js

vue.js

webpack

favicon

vue-cli