如何更改 favicon.ico 和页面标题（Vue + Webpack）？答案

【问题标题】：How to change favicon.ico and page title (Vue + Webpack)?如何更改 favicon.ico 和页面标题（Vue + Webpack）？
【发布时间】：2019-06-12 13:06:49
【问题描述】：

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

不知何故，页面标题总是“Vue App”，而 favicon 是 Vue 标志。我该如何改变这些？它们似乎是从 webpack 配置中的某个地方生成的，但我不知道在哪里。

【问题讨论】：

查看public/index.html
啊，Project Structure，index.html 应该在根文件夹中
我尝试将 index.html 中的标题更改为我的应用名称，但这并未被使用。在配置中的某处生成了“Vue App”标题。
更改标题并重启开发服务器
我更改了 index.html 中的标题并运行“npm run build”以在本地运行服务器。仍然显示“Vue App”标题

标签： vue.js webpack

【解决方案1】：

我通过在项目根目录创建一个公用文件夹来解决此问题。然后我将我的 index.html 和 favicon 移动到公用文件夹中。

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

【讨论】：

【解决方案2】：

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

使用您自己的标题创建 custom-index.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'),
  })
],

【讨论】：