Question

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

以某种方式页面标题始终为“ Vue App”，而图标图标则为Vue徽标。如何更改这些？它们似乎是从webpack配置中的某个位置生成的，但是我不知道在哪里。

Answer 1

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

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

Answer 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'),
  })
],

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

2 个答案: