如何更改网站图标.ico和页面标题(Vue + Webpack)

Question

我用vue-cli创建了我的项目，运行'vue init webpack project-name'。我不知道如何更改页面标题和显示的图标。

不知何故，页面标题总是"Vue App"，图标是 Vue 徽标。如何更改这些内容？它们似乎是从 webpack 配置中的某个地方生成的，但我无法弄清楚在哪里。

Answer 1

我通过在项目根目录上创建一个公共文件夹来解决此问题。然后我把我的索引.html和收藏夹图标移到了公用文件夹中。

//This is in the index.html head
<link rel="icon" type="image/png" href="/favicon.png" />

Answer 2

如果您使用的是 vue-cli，这是我能找到的唯一方法，可以在加载时让页面标题不专业地刷新"Vue App"。 如果有人找到更简单的解决方案，请分享！

使用自己的标题创建自定义索引.html然后在 vue.config.js 中：

const HTMLWebpackPlugin = require('html-webpack-plugin');
...
plugins: [
  new HTMLWebpackPlugin({
      showErrors: true,
      cache: true,
      template: path.resolve(__dirname, 'src/custom-index.html'),
  })
],