The specific steps to configure the title icon and text in the title bar under vue

1. Ordinary HTML page, configure icons and text

<head>
  <title>标题栏文字</title>
  <link rel="icon" href="../favicon.ico" type="image/x-icon">
</head>

2. In the vue project, configure icons and text

  • 1. Add the title bar text to the title tag in the index.html file in the root directory of the website
  • 2. Put the image .ico file in the root directory of the website
  • 3. Modify the webpack.prod.conf.js and webpack.dev.conf.js files in the build folder
var path = require('path') // 开头引入 path 模块
....
// HtmlWebpackPlugin 中添加 favicon
new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  favicon: path.resolve('favicon.ico'), // 引入图片地址
  inject: true
})
  • 4. Restart the project

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325361439&siteId=291194637